美文网首页
webpack 学习第2集 - 管理资源

webpack 学习第2集 - 管理资源

作者: 半斋 | 来源:发表于2018-11-01 13:56 被阅读0次

    快速回忆用,无详细说明

    为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loadercss-loader

    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'
    +         ]
    +       }
    +     ]
    +   }
      };
    

    建议使用 url-loader,可以对小于一定限制大小的图片转成DataURL来减少请求量

    npm install --save-dev file-loader
    
      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'
    +         ]
    +       }
          ]
        }
      };
    

    使用 file-loader 或者 url-loader

      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'
    +         ]
    +       }
          ]
        }
      };
    

    加载.json文件为内置功能,不需要加载额外loader
    这里加载的两个loader是用来处理 cvs、xml文件的

    npm install --save-dev csv-loader xml-loader
    
    +       {
    +         test: /\.(csv|tsv)$/,
    +         use: [
    +           'csv-loader'
    +         ]
    +       },
    +       {
    +         test: /\.xml$/,
    +         use: [
    +           'xml-loader'
    +         ]
    +       }
    
    • 关于本次学习使用的代码Git

    相关文章

      网友评论

          本文标题:webpack 学习第2集 - 管理资源

          本文链接:https://www.haomeiwen.com/subject/pxjatqtx.html