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'
    +         ]
    +       }
  • 相关阅读:
    HDU 1042 N!
    linux上安装wps办公软件
    《UNIX环境高级编程》笔记--环境变量
    【StatLearn】统计学习中knn算法实验(2)
    Asp.Net验证控件浅析
    斜率小于0的连线数量-归并排序
    Printk与sched_clock_init的一点分析
    【数字图像处理】使用kmeans算法对TrueColor图片进行优化
    将 Shiro 作为应用的权限基础 三:基于注解实现的授权认证过程
    python中os/sys/platform模块区别
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11913214.html
Copyright © 2011-2022 走看看