webpack4 經常使用插件列表及使用說明

copy-webpack-plugin

在webpack中拷貝單個文件或多個文件或整個目錄, 可用於大型類庫的拷貝
npmjs: https://www.npmjs.com/package...
github: https://github.com/webpack-co...

示例

const CopyWebpackPlugin = require('copy-webpack-plugin');
  new CopyWebpackPlugin([
    { from: '**/*', to: 'relative/path/to/dest/' }
    { from: '**/*', to: '/absolute/path/to/dest/' }
  ], options)

purifycss-webpack

打包編譯時，可剔除頁面和js中未被使用的css，這樣使用第三方的類庫時，只加載被使用的類，大大減少css體積
npmjs: https://www.npmjs.com/package...
github: https://github.com/webpack-co...

示例

let purifyCssPaths = glob.sync(path.join(rootPath, '/src/server/view/**/*.html'));
purifyCssPaths = purifyCssPaths.concat(glob.sync(path.join(rootPath, '/src/client/js/**/*.js')));

new PurifyCSSPlugin({
  paths: purifyCssPaths,
})

optimize-css-assets-webpack-plugin

壓縮css，優化css結構，利於網頁加載和渲染
npmjs: https://www.npmjs.com/package...

示例

new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.optimize\.css$/g,
  cssProcessor: require('cssnano'),
  cssProcessorOptions: { discardComments: { removeAll: true } },
  canPrint: true
})

clean-webpack-plugin

編譯輸出文件前，刪除舊文件，當利用文件hash值輸出時，能夠利用改插件刪除原有文件
npmjs：https://www.npmjs.com/package...

示例

new CleanWebpackPlugin(['dist','build'], { 
  root: '/var/www/'
 })

jay-remove-webpack-plugin

當less文件做爲入口文件，而不是在js中加載時，會額外生成無用的js文件，能夠利用該插件去除這些文件
npmjs：https://www.npmjs.com/package...

示例

new RemoveWebpackPlugin({
    filterPath: /^\/css\/.*\.js?$/ig
})

progress-bar-webpack-plugin

打包編譯時，顯示進度條
npmjs：https://www.npmjs.com/package...

示例

new ProgressBarPlugin();

stylelint-webpack-plugin

規範scss, less，css書寫規則
npmjs：https://www.npmjs.com/package...
roles：https://stylelint.io/user-gui...

示例

new StyleLintPlugin({
      context: path,
      files: '**/*.(less|css|sass)',
  })

mini-css-extract-plugin

這個插件將CSS解壓到單獨的文件中。它爲每一個包含CSS的JS文件建立一個CSS文件。extract-text-webpack-plugin該插件在webpack4中再也不建議使用
npmjs：https://www.npmjs.com/package...

示例

new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
    chunkFilename: '[id].css'
  }),

webpack-parallel-uglify-plugin

能夠並行運行UglifyJS插件，這能夠有效減小構建時間
npmjs：https://www.npmjs.com/package...

示例

new ParallelUglifyPlugin({
    cacheDir: path.join(config.rootPath,'webpack-cache'),
    workerCount: 5,
    uglifyJS:{
      output: {
        comments: false
      },
      compress: {
        warnings: false
      }
    }
  })

happypack

多線程執行任務，加快編譯速度
npmjs：https://www.npmjs.com/package...

示例

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

//plugin
  new HappyPack({
    id: 'less',
    threadPool: happyThreadPool,
    loaders: [{
      loader: 'less-loader',
    }]
  }),

//loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
{
    test: /\.less$/,
    use: [
      'css-hot-loader',
      MiniCssExtractPlugin.loader,
      'happypack/loader?id=css',
      'happypack/loader?id=less',   
    ]
  },

assets-webpack-plugin

生成資源路徑和文件名對應關係，可利用該插件生成輸出帶有hash值的文件名。摒棄了利用版本號來更新緩存。利用文件內容生成hash值時，用戶只須要更新被改動過的文件。
npmjs：https://www.npmjs.com/package...

示例

new AssetsPlugin({
  path: '/var/www/',
  filename: 'webpack.assets.json',
};);

https://github.com/Jay-tian/w... 該項目已經集成以上全部插件，能夠前來學習借鑑。
項目說明 https://segmentfault.com/a/11...

未完待續