webpack常用plugin（优化持续更新）

最新推荐文章于 2025-05-26 16:38:55 发布

一个......

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量842

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/sunzhibin1/article/details/129372944

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

常用plugin

常用plugin

1. html-webpack-plugin（生成html文件，自动引入所依赖的js）

用通俗的话来说,就是这个plugin是为了生成html文件的,而且会自动引入所依赖的打包好的js代码,这些js代码在生成哈希值为了避免缓存的同时造成的问题就是html内的引入变得不再方便,因为没有规则匹配来引入的话,那每次可能打包好的js都需要我们去手动引入,那么这个plugin就是为了解决这个问题的,引入所需要的代码的意思就是不再会因为哈希值的改变而做另外的事情,plugin会帮我们找到这些js且帮我们引入到html

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）

这个插件,总体来说是用于每次打包之前删除dist文件夹内上次打包的内容的,打包没那么智能,他是不能自主判断你两次打包是否是重复的是否是需要重新来打包的,特别是你用了哈希值这样的文件后缀之后,话说回来,这个插件踩坑的人可算是不少,满坑满谷的都是踩坑的,我预估是之前的官方文档可能有问题,但是现在npm文档已经没有问题了,引用的方式也是正确的,使用的示例也是正确的,不用担心

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
	plugins: [
		new CleanWebpackPlugin(),
	],
};

3. uglifyjs-webpack-plugin（压缩文件）

1.uglify-js文档
 2.参考解释的很详细的optimization的帖子

uglifyjs-webpack-plugin插件用来缩小（压缩优化）js文件，最低使用版本为:Node v6.9.0/Webpack v4.0.0,一般我们现在的项目都是可以不用操心这个的,毕竟这俩兼容版本已经很低了
这里需要先说一个东西,就是optimization,这个也是webpack的一个配置,作用就是优化,默认的话是uglifyjs-webpack-plugin(webpack自己的)来压缩打包,但是这个我们是可以配置的,用不同的压缩插件来进行自定义,minimizer就是配置我们自定义插件的地方,默认为true

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超长的打包时间所困惑过,完全不理解为啥会耗费这么长的时间,这是因为我们自己的脚手架有时候会用很多的第三方库和组件,这些东西都会在我们编译的时候被编译进去,然而这些库其实是不经常更新的,这样我们每次的编译其实都是多余的规则,webpack社区有两种方案,第一种是CommonsChunkPlugin,这个是把第三方库跟我们的代码编译后分开,但是还是要走原来的流程没啥作用,另一个就是DLLPlugin,这个实际上是一个配置文件,作用就是可以只编译我们的核心代码,其他的我们不经过编译直接使用
DllPlugin是webpack内置的插件,我们做的就是创建一个webpack.dll.config.js,不需要额外安装,直接配置webpack.dll.config.js文件

//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')
    }),
  ]
}

这里就是dll的配置,webpack打包之前先执行这个配置文件,执行语句为webpack --config webpack.dll.js --mode=development,这里也可以配置为命令,执行这个命令会生成一个manifest.json文件,这个文件的名称就是entry配置的名称-manifest.json,这个名称需要记住规则,因为再webpack.config.js中配置是要使用的

  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./dist/dll/react.manifest.json')
  }),

在webpack里需要配置这个manifest文件,用来使DllReferencePlugin这个插件找到生成的配置文件,然后再入口文件中引入react.dll.js就可以了

<body>
  <div id="app"></div>
  <!--引用dll文件-->
  <script src="../../dist/dll/react.dll.js" ></script>
</body>

注意看这个Dll到底了什么,实际上不是很复杂,只不过是在我们常用的逻辑之外
Dll先是通过配置文件,找到了我们配置的一些第三方库或者组件,这些库被我们生成了一个js库,而且给出了一个manifest配置,这个配置就是Dll库的配置文件,当找通过我们配置的名称找到这个文件的时候,我们就会再manifest的配置找寻找模块,找到了就去生成的Dll库中拿,就不再经过打包路径了,通俗一些来讲,就是我把东西都包装好在一个库里,这个库放在了build文件夹内,给你了你一个目录,你那边打包的时候,通过DllReferencePlugin来找目录(manifest),找到的话说明是有的,那你就不用管了,为啥,因为入口文件html已经手动引入了,所以说html内引入也很好理解,webpack所有的流程就到目录那看有没有就已经结束了,库还是需要我们自己引入的,因为目录里有的webpack会默认为可以打包好的代码可以直接使用

5. mini-css-extract-plugin（打包出css文件，可配合uglifyjs-webpack-plugin进行压缩优化）

在使用webpack构建工具的时候，通过style-loader，可以把解析出来的css通过js插入内部样式表的方式到页面中,我们如果不想这样做的话该怎么办,我们要做的是吧css都提出来,放在css文件中,这个然后用html-webpack-plugin就可以默认引入我们随意变化哈希值的css文件

optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }

看以上代码我们可以看出来,这个插件,算得上是简单好用,我们在做的事只是把style-loader换成MiniCssExtractPlugin.loader,我们用插件中的loader就可以取代style-loader的作用且打包的时候打包到css文件中,配置到minimizer中,说明我们这个也是可以用来做优化使用的,一般情况下我们会用const devMode = process.env.NODE_ENV !== 'production’来拿到我们的当前环境,然后来判断是不是开发环境,如果是的话我们就会使用这个loder,如果不是的话我们可以使用style-loader

6. IgnorePlugin（忽略第三方包指定目录，让这些指定目录不要被打包进去）

IgnorePlugin是一个webpack内置的plugin,这个无需装包,就可以直接使用,作用也很好理解,就是忽略第三方包指定目录,让这些指定目录不要被打包进去,经典用法,忽略moment的其他语言内容,只打包我们用到的内容

const { IgnorePlugin }= require('webpack')
plugins: [
  //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
  new IgnorePlugin (/\.\/locale/, /moment/),
]

IgnorePlugin 虽然有时候不好筛选出来区分我们需要的和不需要的会一并给忽略掉,但是我们是可以手动引入的,这样就不会被忽略了

//手动在使用moment的下边引入语言包
import 'moment/locale/zh-cn.js';