常用插件1. html-webpack-plugin（生成html文件并自动引入依赖js）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};
2. clean-webpack-plugin（自动清除dist）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
plugins: [
new CleanWebpackPlugin(),
],
};
3.uglifyjs-webpack-plugin（压缩文件）
1.uglify-js文档
2.参考优化帖子有详细解释
const HtmlWebpackPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [
new UglifyJsPlugin()
]
},
这是我们使用当前插件时的默认配置。 可以改成我们现在的js压缩插件。 当然，还有很多配置参数。 让我们来看看。
new UglifyJsPlugin({
test: /.js(?.*)?$/i, //选中匹配规则文件,
include: //includes/, //包含哪些文件
excluce: //excludes/, //不包含哪些文件
//看到filter我们就知道了吧这是个过滤器,用来过滤哪些压缩和不压缩的,返回true的是压缩的,返回false不压缩
chunkFilter: (chunk) => {
if (chunk.name === '天选之子') {
return false;
}
return true;
},
cache:true,//是否缓存,可以写string模式的,来确定缓存路径
parallel:true,//是否启动多线程提高构建速度,也可以写数字来确定几个线程,建议不用,一般来说没那么复杂用的话反而效果不好
uglifyOptions:{}//这个可以写很多的具体压缩规则配置,因为默认用的是uglify-js,所以参数较多我下边列一下
}),
这也是一个非常常用的插件，几乎可以算是首选。
4.DLLPlugin（加速打包，只编译核心代码，第三方库无需编译直接使用）
//webpack.dll.config.js
module.exports = {=
entry: {
// 第三方库
react: ['react', 'react-dom', 'react-redux']
},
output: {
// 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
filename: '[name].dll.js',
path: resolve('dist/dll'),
// library必须和后面dllplugin中的name一致 后面会说明
library: '[name]_dll_[hash]'
},
plugins: [
// 接入 DllPlugin
new webpack.DllPlugin({
// 动态链接库的全局变量名称，需要和 output.library 中保持一致
// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
name: '[name]_dll_[hash]',
// 描述动态链接库的 manifest.json 文件输出时的文件名称
path: path.join(__dirname, 'dist/dll', '[name].manifest.json')
}),
]
}
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/dll/react.manifest.json')
}),
<body>
<div id="app"></div>
<!--引用dll文件-->
<script src="../../dist/dll/react.dll.js" ></script>
</body>
注意这个 Dll 的作用。 其实并不是很复杂，只是超出了我们常用的逻辑而已。
dll首先找到了我们通过配置文件配置的一些第三方库或者组件。 这些库被我们生成成js库，并给出了manifest配置。 这个配置就是Dll库的配置文件。 当我们通过我们的配置名称中找到这个文件时开发webpack插件，我们也会在manifest配置中搜索该模块。 如果找到了，我们就去生成的Dll库去获取，就不再走打包路径了。 通俗地说，我会把所有东西都放进去。 它被打包在一个库中。 该库放置在构建文件夹中并为您提供一个目录。 打包时，使用DllReferencePlugin查找目录（清单）。 如果找到了，就说明它存在，那么你就可以不用管了，为什么，因为入口文件html已经被自动导入了，所以html中的导入很容易理解。 webpack的所有流程都是通过去目录看有没有的方式来完成的。 库还是需要我们自己导入。 因为目录下有些webpack会默认打包代码，可以直接使用。
5. mini-css-extract-plugin（打包css文件开发webpack插件，可以配合uglifyjs-webpack-plugin进行压缩优化）
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
看了上面的代码，我们可以看出这个插件简单易用。 我们所做的只是用 MiniCssExtractPlugin.loader 替换 style-loader。 我们可以使用插件中的loader来代替style-loader的作用并进行打包。 当打包成css文件并配置到minimizer中时，就意味着我们的也可以用于优化。 一般情况下，我们会使用 const devMode = process.env.NODE_ENV !== 'Production' 来获取我们当前的环境，然后判断是否是开发环境。 如果是这样，我们仍然会使用这个加载器。 如果没有，我们可以使用样式加载器。
6、IgnorePlugin（忽略第三方包指定的目录，并阻止那些指定的目录被打包）
const { IgnorePlugin }= require('webpack')
plugins: [
//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
new IgnorePlugin (/./locale/, /moment/),
]
//手动在使用moment的下边引入语言包
import 'moment/locale/zh-cn.js';
发表评论