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...

未完待续