• webpack管理资源(loader操作)


    1.加载css

    npm install --save-dev style-loader css-loader

    webpack.config.js文件中:
    const path = require('path');
    
      module.exports = {
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        },
    +   module: {                  // 加入处理模块
    +     rules: [
    +       {
    +         test: /.css$/,
    +         use: [
    +           'style-loader',
    +           'css-loader'
    +         ]
    +       }
    +     ]
    +   }
      };

    2.加载picture

    npm install --save-dev file-loader

    webpack.config.js文件中:
    const path = require('path');
    
      module.exports = {
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        },
        module: {
          rules: [
            {
              test: /.css$/,
              use: [
                'style-loader',
                'css-loader'
              ]
            },
    +       {
    +         test: /.(png|svg|jpg|gif)$/,
    +         use: [
    +           'file-loader'
    +         ]
    +       }
          ]
        }
      };

    3.加载字体

    npm install --save-dev file-loader
    webpack.config.js文件中:
    const path = require('path');
      module.exports = {
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        },
        module: {
          rules: [
            {
              test: /.css$/,
              use: [
                'style-loader',
                'css-loader'
              ]
            },
            {
              test: /.(png|svg|jpg|gif)$/,
              use: [
                'file-loader'
              ]
            },
    +       {
    +         test: /.(woff|woff2|eot|ttf|otf)$/,
    +         use: [
    +           'file-loader'
    +         ]
    +       }
          ]
        }
      };

    src/style.css文件中:

    + @font-face {
    +   font-family: 'MyFont';
    +   src:  url('./my-font.woff2') format('woff2'),
    +         url('./my-font.woff') format('woff');
    +   font-weight: 600;
    +   font-style: normal;
    + }
    
      .hello {
        color: red;
    +   font-family: 'MyFont';
        background: url('./icon.png');
      }
     

    4.加载数据

    npm install --save-dev csv-loader xml-loader

    webpack.config.js文件中:
    +       {
    +         test: /.(csv|tsv)$/,
    +         use: [
    +           'csv-loader'
    +         ]
    +       },
    +       {
    +         test: /.xml$/,
    +         use: [
    +           'xml-loader'
    +         ]
    +       }
  • 相关阅读:
    无向图判断割点
    C
    连通图 求至少有给几个点信息才能传遍全图,至少添加几条边才能使全图联通
    线段树区间更新(set暴力)
    A
    辗转相除法(数学推理)
    Python List index()方法
    Python List extend()方法
    Python List count()方法
    Python List append()方法
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11913214.html
Copyright © 2020-2023  润新知