zoukankan      html  css  js  c++  java
  • 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# 访问USB(HID)设备
    IPad C盘中backup文件夹占用太多空间
    fastboot
    adb get android's ip
    Reading MMS
    Bitcoin
    内存问题导致编译不过!
    串口LOG 单编kernel
    Source Insight 格式化
    framework层的空指针会让系统重启
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11913214.html
Copyright © 2011-2022 走看看