webpack4入门笔记——插件

·  阅读 1344

什么是插件?

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
复制代码
  1. 配置
//引入
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+ 多入口程序构建

分类:
前端
标签:
分类:
前端
标签: