webpack常用的插件

webpack常用的開發插件

　　1.clean-webpack-plugin

　　　　運行webpack build時先把打包進入的文件夾清空

　　　　注意，它是以對象的方式去接收的

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
plugins: [
    new CleanWebpackPlugin(),
  ]

　　2.html-webpack-plugin

　　　　模板文件,動態的去創造模板文件

　　　　主要用途

　　　　　可以動態的引入js,因為每次打包后的js hash值可能不一樣，它可以根據具體的hash值，引入js

const HtmlWebpackPlugin = require("html-webpack-plugin")

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: 'czklove',
      filename: 'index.html',
      chunks: '[name].bundle[hash].js'
    })
  ]

　　3.HotModuleReplacementPlugin  模塊熱替換插件

　　　webpack 內置插件，可以簡單配置就能用。功能，就是提供保存后，頁面刷新修改內容　

new webpack.HotModuleReplacementPlugin()

　　4.最最重要的插件，SplitChunksPlugin ,代碼分割插件

optimization: {
    splitChunks: {
      chunks: 'initial', // 分割方式 async, all ，initial
      minSize: 30000, //分割后的文件最小值
      minChunks: 1, // 最小引用次數
      maxAsyncRequests: 5, // 異步的最大分割數
      maxInitialRequests: 3, // 初始模塊的最大分割數
      automaticNameDelimiter: '~', // 分割后的名字用什么符號鏈接
      name: true,
      cacheGroups: { //緩存組
        venxx: {
          test: /vue/,
          name: 'vuevendors'
        },
        vendors: {
          test: /jquery/,
          name: 'jqueryvendors'
        }
      }
    }
  },

　　主要用途

　　　　1.做代碼分割，默認是將所以的異步引入單獨打包，如常見的Vue異步路由組件

　　　　2.將不常改變的模塊代碼單獨打包，這樣更有利於瀏覽器的緩存處理，如將vue  vuex vue-router, ui庫，這些都是不常改變

　　　　3.將業務代碼單獨打包，這是經常改變的

　　　　4.異步模塊代碼單獨打包，做預加載處理，加快首頁加載速度

　　如果項目過大，打包事件過長，可以考慮使用HappyPack 插件，開啟多進程打包（不是多線程，js是單線程的）

plugins: [
      new HappyPack({
        id: 'babel', // 與loader 配置項對應
        threads: 4, // 開啟多少個進程
        loaders: ['babel-loader'] //用什么loader處理
      })
    ]