webpack之常用plugin的配置和使用

概述

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插件文檔
• 還有很多有用的插件，其它的以后補充