webpack 4使用筆記のplugin

3747 ワード
webpack javascript
webpack 4
常用plugin
  • clean-webpack-plugin
  • html-webpack-plugin
  • mini-css-extract-plugin
  • terser-webpack-plugin(webpack4 )
  • optimize-css-assites-webpack-plugin
  • webpack-bundle-analzer
  • 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ファイルを自動的に作成して、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-assites-webpack-plugin
  • webpack5はcss圧縮を内蔵する可能性が高く、圧縮出力のためにoptimize-css-assites-webpack-pluginプラグインを使用することができます.
  • はデフォルトではjsだけ圧縮されているので、設定optimization.minimizerによってデフォルトの圧縮プロファイルをカバーすることにより、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-analzer
  • は、webpack-bundle-analyzerを使用することにより、プロジェクトの各モジュールのサイズを見ることができ、必要に応じて、
    • を最適化することができる.
    写真はwebpack-bundle-analzerのgithubから来ます.
    【Hadoop】c+&python Hadoop Streamingのパートナーとモジュール化を実現します.