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