webpack管理资源loader

| 什么是loader

loader主要用于转换某些类型的模块，它是一个转换器。

为什么用loader

• webpack只能理解 JavaScript 和 JSON 文件
• 其他类型的文件都需要经过loader处理，将它们转换为js可识别的有效模块
• webpack天生支持 ECMAScript、CommonJS、资源模块等模块类型
• loader可以做语言翻译,如ts转js

| 加载CSS

为了在JavaScript模块中import一个css文件，你需要安装加载器，并在module中配置这些加载器

1.安装css相关加载器style-loader和css-loader

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

2.在配置文件module.rule模块添加loader 注意：

• style-loader和css-loader顺序不能颠倒
• webpack对于链式调用是从后往前调用，即css-loader先执行
• style-loader会把css抽离成js文件

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }

加载less或css

module: {
        rules: [
            {
_                // test: /\.(css)$/,
+                test: /\.(css | less)$/,
                use: ['style-loader', 'css-loader','less-loader']
            }
        ]
    }

| 抽离和压缩CSS

这里主要介绍插件的使用

抽离css 使用mini-css-extract-plugin来进行css的抽离，该插件基于webpack5构建的，需要webpack5才能使用 1.安装插件

npm install mini-css-extract-plugin

2.配置插件

// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...,
    plugins: [
        // 配置插件
        new MiniCssExtractPlugin({
            // 插件相关配置，详情看文档
           // https://webpack.js.org/plugins/mini-css-extract-plugin/#options
           filename: 'styles/[contenthash].css', // 指定抽离出来的css文件目录文件名
            ...
        })
    ]
};

上面加载CSS中我们使用style-loader把css抽离成js文件，使用该插件之后css会单独抽离为一个css文件，因此style-loader不再使用

引用MiniCssExtractPlugin.loader替换style-loader即可

module: {
        rules: [
            {
                test: /\.(css | less)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
            }
        ],
    }

执行npx webpack

压缩css css-minimizer-webpack-plugin 使用 cssnano 优化和压缩 CSS。

就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行 1.安装

npm install css-minimizer-webpack-plugin -D

2.配置 该插件只在生产环境下才开启css优化 需要把mode的值改为production

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
   ...,
   optimization: {
       minimizer: [new CssMinimizerWebpackPlugin()],
   },
   mode: 'production'
};

如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  ...,
  optimization: {
      minimizer: [new CssMinimizerWebpackPlugin({
          // 可配置相关选项
          // https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/#options
      })],
      minimize: true // 允许开发环境下css优化
  }
};

| 加载字体文件

module: {
        rules: [
            {
                test: /\.(woff | woff2 | eot | ttf | otf)$/,
                type: 'asset/resource',
            }
        ],
    }

| 加载数据

加载JSON文件默认是支持的 加载CSV、TSV和XML，可以使用csv-loader和xml-loader来处理加载这三类文件： 1.安装

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

2.添加配置

module: {
       rules: [
           {
               test: /\.(csv | tsv)$/i,
               use: ['csv-loader'],
           },
           {
               test: /\.xml$/i,
               use: ['xml-loader'],
           }
       ],
   }

3.导入文件

import xmlData from './assets/data.xml'
import csvData from './assets/data.scv'

console.log(xmlData); // Object
console.log(csvData); // Array

输出结果

| 自定义JSON模块paser

如果要加载后缀为toml、yaml、json5这些文件格式的话，需要自定义配置一下解析器 1.安装

npm install toml yaml json5

2.配置

const toml = require('toml');
const yaml = require('yaml');
const json5 = require('json5');
module.exports = {
   ...,
   module: {
          rules: [
              {
                  test: /\.toml$/,
                  tyep:'json',
                  pareser:{
                      parse: toml.parse
                  }
              },
               {
                  test: /\.yaml$/,
                  tyep:'json',
                  pareser:{
                      parse: yaml.parse
                  }
              }, {
                  test: /\.json5$/,
                  tyep:'json',
                  pareser:{
                      parse: json5.parse
                  }
              }
          ],
      }
}

配置完之后只需把这些文件import进来使用

import tomlData from './assets/data.toml'
import yamlData from './assets/data.yaml'

console.log(tomlData); 
console.log(yamlData); 

| 编译js

ES6 语法在开发中已经非常普及 然而，浏览器对这些高级语法的支持性并不是非常好 因此为了让我们的新语法能在浏览器中都能顺利运行，我们需要编译js语法

编译js语法使用到babel-loader

babel-loader 1.安装

npm install -D babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime

• babel-loader:解析ES6的桥梁
• @babel/core: babel核心模块
• @babel/preset-evn:babel预设,就是babel插件的集合
• @babel/runtime: 运行时需要，比如要用要async/await
• @babel/plugin-transform-runtime: 编译时需要

2.在module模块配置babel

module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude:/node_modules/, // 不编译node_modules文件夹
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                             plugins: [['@babel/plugin-transform-runtime']]
                        }
                    }
                }
            ]
        }

| 参考

# webpack 之 Loader 详解