webpack4使用筆記

webpack4

plugin

• clean-webpack-plugin
• html-webpack-plugin
• mini-css-extract-plugin
• terser-webpack-plugin(webpack4內置)
• optimize-css-assets-webpack-plugin
• webpack-bundle-analyzer

• clean-webpack-plugin

  • 清除文件插件

new cleanWebpackPlugin(
  [resolve('dist'), resolve('build')], {
    root: __dirname,
    exclude:  ['test.html'], // 排除
    verbose: true, // Write logs to console.
    dry: false,    // Use boolean "true" to test/emulate delete. (will not remove files).
    watch: false,     // If true, remove files on recompile. 
    beforeEmit: false // 在將文件發送到輸出目錄之前執行清理
})

• html-webpack-plugin

  • 自動幫你生成一個 html 文件，並且引用相關的 assets 文件(如 css, js)。
  • 如果你既指定了 template 選項，又指定了 title 選項，那麼webpack 會選擇哪一個？ 事實上，這時候會選擇你指定的模板文件的 title, 即使你的模板文件中未設置 title。

new htmlWebpackPlugin({
    title: 'testooo', // html 文件的標題
    filename: 'detail.html', // 生成 html 文件的文件名。默認爲 index.html.
    template: `./src/detail.html`, // 根據自己的指定的模板文件來生成特定的 html 文件
    chunks: ['index', 'vendor'], // 主要是針對多入口(entry)文件。當你有多個入口文件的時候，對應就會生成多個編譯後的 js 文件。那麼 chunks 選項就可以決定是否都使用這些生成的 js 文件。默認引用所有
    inject: 'body',  // true默認值，script標籤位於html文件的 body 底部 注入選項 
    hash: true, //  hash選項的作用是 給生成的 js 文件一個獨特的 hash 值 xx.js?xxxxxx
    // 對 html 文件進行壓縮
    minify: {
      removeAttributeQuotes:true,
      removeComments: true,
      collapseWhitespace: true,
      removeScriptTypeAttributes:true,
      removeStyleLinkTypeAttributes:true
   }
})

• mini-css-extract-plugin

  • 分離css: 此插件將CSS提取到單獨的文件中。
  • 它爲每個包含CSS的JS文件創建一個CSS文件。它支持CSS和SourceMaps的按需加載。
  • extract-text-webpack-plugin ，只支持 webpack 4 以下提取 CSS 文件, webpack 4以上用mini-css-extract-plugin

• terser-webpack-plugin(webpack4內置)

  • webpack 4 中刪除了 webpack.optimize.CommonsChunkPlugin,並且使用 optimization 中的splitChunk來替代,下面的配置代替了之前的 CommonsChunkPlugin 配置，同意能提取 JS 和 CSS 文件
  • 壓縮的配置也移動到了 optimization 選項下，值得注意的是壓縮工具換成了 terser-webpack-plugin，這是 webpack 官方也推薦使用的

module.exports = {
    optimization: {
        splitChunks: {
          vendors: {
            name:  'venders',
            chunks:  'all',
            minChunks: chunks.length
        }
      }
}

• optimize-css-assets-webpack-plugin

  • webpack5很可能會內置css壓縮,爲了壓縮輸出，可使用optimize-css-assets-webpack-plugin插件。
  • 默認只壓縮js，所以通過設置optimization.minimizer覆蓋默認的壓縮配置，應確保指定了一個JS的壓縮配置, 否則默認配置就被覆蓋了，就不再壓縮js了。
  • 類似extract-text-webpack-plugin，通過optimization.splitChunks.cacheGroups可以將css提取到一個文件中。

module.exports = {
    minimizer: [
      new terserPlugin({ // 壓縮js
        cache:  true,
        parallel:  true
      }),
      new optimizeCSSAssetsPlugin({ // 壓縮css
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    optimization: {
        cacheGroups: {
            styles: {            
              name: 'styles',
              test: /\.scss|css$/,
              chunks: 'all',    // merge all the css chunk to one file
              enforce: true
            }
          }
      }
}

• webpack-bundle-analyzer

  • 通過使用webpack-bundle-analyzer可以看到項目各模塊的大小，可以按需優化

圖片來自於webpack-bundle-analyzer的github

devServer

• devServer需要webpack-dev-server配合使用，藉助webpack-dev-server快速啓動一個靜態服務

➔ host:：指定 ip 或域名
➔ port： 指定端口
➔ contentBase：指定根目錄
➔ open：是否自動打開瀏覽器
➔ hot：是否啓用熱替換
➔ disableHostCheck：禁用 host 檢查
➔ proxy：代理請求
➔ before：自定義中間件

"scripts": {
    "dev": "webpack-dev-server --mode development"
}

• 當 mode爲 development 並且啓用 HotModuleReplacementPlugin 插件時，會具備 hot reload` 的功能。即當源碼文件變化時，會即時更新當前頁面，以便看到最新的效果。

• HotModuleReplacementPlugin

  • 啓用熱替換模塊(Hot Module Replacement)，也被稱爲 HMR

...
devServer: {
    host: '127.0.0.1',  // 指定 ip 或域名
    port: 80, 
    contentBase: path.join(__dirname, 'dist'), // 指定根目錄
    open: true,  // 否自動打開瀏覽器
    hot: true,   // 是否啓用熱替換
    disableHostCheck: true, // 禁用 host 檢查
    proxy: {},
    before () {} // 自定義中間件
},
plugins: {
    new webpack.HotModuleReplacementPlugin({
      // Options...
    })
}