webpck中的loader及plugin的使用

loader介绍：

loader 用于对模块的源代码进行转换，由于webpack只能解析js及json格式，对于其他格式的文件需要借助对应的loader去处理。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。

示例：

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：
webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

loader 特性：

loader 支持链式调用，例如在以下的案例中,同时使用了css-loader和lessloader对css和less进行处理，在use中，webpack的解析顺序是倒序解析的，在调用的过程中会先将less-loader的结果传递给css-loader，再将css-loader处理的结果传递给style-loader。

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

plugin插件介绍：

webpack提供了很多开箱即用的插件，插件是用于处理loader无法处理的事情。

案例：

如何使用插件抽离及压缩css？
第一步：下载并引入两个插件:分别用于抽离css和压缩css。

const MiniCssExtractPlugin = require('mini-css-extract-plugin') 
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

第二步：在plugins中使用插件。

plugins:[
    //抽离css文件
    new MiniCssExtractPlugin({
      filename:'style/[contenthash].css'
    })
 ],

在配置loader中使用mini-css-extract-plugin提供的loader。

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

第三步：在optimization.minimizer中使用css-minimizer-webpack-plugin,并将mode改为production。

 optimization:{  //优化
    minimizer:[
      new CssMinimizerWebpackPlugin() 
    ]
  }