概述

webpack中的外掛主要是用來完成loader和配置無法完成的事情

常見的幾種Plugins

HtmlWebpackPlugin

• 參考文件
• html-webpack-plugin外掛預設會建立一個HTML模板，並自動引入打包生成的幾個主要的chunk包
• 也可以通過template屬性配置自己的模板
• 通常在模板中使用jsp語法獲取配置等資訊，需要注意的是在模板中使用htmlWebpackPlugin（與外掛名大小寫不同）來獲取屬性 （eg. 通過使用htmlWebpackPlugin.options獲取外掛配置屬性）
• 使用minify屬性可以配置壓縮選項
• 更多詳細配置參考文件

安裝

npm i -D html-webpack-plugin
 

使用

module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
            // 複製./src/js/index.html 檔案
            template: './src/js/index.html',
            title: 'webpack build', // template設定時或者使用html loader時 不起作用
            filename: 'index.html',
            minify: {
                collapseWhitespace: true, // 移除空格
                removeComments: true // 刪除html檔案註釋 打包時有效
            }
       })
    ]
}
 

MiniCssExtractPlugin

• 參考文件
• 該外掛用於分割css chunk包
• 使用該外掛時需要搭配MiniCssExtractPlugin.loader使用

安裝

npm i -D mini-css-extract-plugin

使用

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[contenthash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};
 

OptimizeCssAssetsWebpackPlugin

• 參考文件
• 該外掛用於壓縮css程式碼

安裝

npm i -D optimize-css-assets-webpack-plugin

使用

module.exports = {
  plugins: [
    new OptimizeCssAssetsWebpackPlugin(),
  ]
};

NamedChunksPlugin

• 該外掛包含在webpack中，不需要額外引用
• 使用該外掛可以修改打包時的chunkName,在進行chunk快取優化時，十分有用

使用

module.exports = {
  plugins: [
    new webpack.NamedChunksPlugin()
  ]
};

ProvidePlugin

• 該外掛包含在webpack中，不需要額外引用
• 在全域性引入模組 無需重複引入 程式碼中可以直接使用模組 （但使用的模組 仍需要是需要安裝的哦）

使用

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({ // 
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
};

注

• webpack外掛文件
• 還有很多有用的外掛，其它的以後補充