webpack4入门笔记——插件

什么是插件？

loader用于打包文件，plugins 用于解决一些其他任务，比如代码压缩，去注释等等

语法

plugins:[xx1,xx2]
复制代码

数组中的参数要求是插件对象的实例，即必须new

plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
]
复制代码

下面是一些常用的插件

代码压缩插件

UglifyJsPlugin 已弃用，生产模式会自动压缩

图片压缩插件

imagemin-webpack-plugin 用于批量压缩图片

1 . 安装

cnpm install imagemin-webpack-plugin --save
复制代码

2 . 配置

//引入插件
var ImageminPlugin = require('imagemin-webpack-plugin').default;

//配置
plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发时不启用
      pngquant: {//图片质量
        quality: '95-100'
      }
    })
]
复制代码

HTML文件创建插件

HtmlWebpackPlugin 用于创建html

多入口时，当你的 index.html 引入多个js，如果这些生成的js名称构成有 [hash] ，那么每次都能修改html中的js名称

HtmlWebpackPlugin 在此可以用于自动重新生成一个index.html，已帮你把生产的所有js文件引入，生成到output目录

1 . 安装

cnpm install html-webpack-plugin --save-dev
复制代码

2. 配置

//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
    new HtmlWebpackPlugin()
]
复制代码

清空文件夹插件

clean-webpack-plugin 可以在每次打包时先清空指定的文件夹

1 . 安装

cnpm install clean-webpack-plugin --save-dev
复制代码

2 . 配置

//引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清空dist文件夹
new CleanWebpackPlugin(['dist'])
复制代码

提供全局变量

每次 import react 是不是很烦，使用这个插件可以导入到全局，之后不用再import

语法： varName : filePath

//这些变量不必再import了
new webpack.ProvidePlugin({
    React:'react',
    ReactDOM:'react-dom'
})
复制代码

公共代码抽取

CommonsChunkPlugin 已弃用，使用optimization.splitChunks代替

作用

提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件

安装

无需安装，内置

配置项

1 . cacheGroups 自定义配置主要使用它来决定生成的文件

• test 限制范围，可以是正则，匹配文件夹或文件
• name 生成文件名
• priority 优先级，多个分组冲突时决定把代码放在哪块
• 其他参见下面

新的chunk文件形成应该符合下面 2-4 条规则

2 . minSize 最小尺寸必须大于此值，默认30000B

3 . minChunks 其他entry引用次数大于此值，默认1

注：

• 个人理解minChunks指的是被不同entry引入的次数
• 为1时，适合分离 node_moudles 里的第三方库（很多人认为这个值设成2其实不合理）

4 . maxInitialRequests entry文件请求的chunks不应该超过此值（请求过多，耗时）

5 . maxAsyncRequests 异步请求的chunks不应该超过此值

6 . automaticNameDelimiter 自动命名连接符

7 . chunks 值为"initial", "async"（默认） 或 "all"

• initial 入口chunk，对于异步导入的文件不处理
• async 异步chunk，只对异步导入的文件处理（个人理解）
• all 全部chunk（我反正选all，不甚理解）

使用方式

1 . 使用默认配置

不配置时再production模式下开启async

配置如下，启用默认配置

optimization:{
    splitChunks:{
        chunks:"all"
    }
}
复制代码

生成的文件 vendors~xx.js ，xx与入口名对应（可能不生成）。

附默认配置

optimization: {
    splitChunks: {
        chunks: "async",
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {//cacheGroups重写继承配置，设为false不继承
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}
复制代码

2 . 自定义配置

生成的文件 xx.js ，xx指name的值

配置示例

optimization: {
	//打包 第三方库
	//打包 公共文件
	splitChunks: {
		cacheGroups: {
			vendor:{//node_modules内的依赖库
				chunks:"all",
				test: /[\\/]node_modules[\\/]/,
				name:"vendor",
				minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取
				maxInitialRequests: 5,
				minSize: 0,
				priority:100,
				// enforce: true?
			},
			common: {// ‘src/js’ 下的js文件
				chunks:"all",
				test:/[\\/]src[\\/]js[\\/]/,//也可以值文件/[\\/]src[\\/]js[\\/].*\.js/,  
				name: "common", //生成文件名，依据output规则
				minChunks: 2,
				maxInitialRequests: 5,
				minSize: 0,
				priority:1
			}
		}
	}
}
复制代码

配合 runtimeChunk

optimization.runtimeChunk 用来提取 entry chunk 中的 runtime部分函数，形成一个单独的文件，这部分文件不经常变换，方便做缓存。

配置如下

runtimeChunk: {
  name: 'manifest'
}
复制代码

注：个人测试的时候，发现提出的东西很少，不是很理解这个 runtime

参考文档

官方

webpack4：连奏中的进化

Webpack4+ 多入口程序构建