webpack2入门-第二篇 公共代码提取插件

这次,我们来看看 webpack 中一些常见的插件如何来使用。

接上篇。

第三个例子 demo3 CommonsChunkPlugin webpack2-demo3

复制一个demo1。

首先介绍下,在本例子中,page1.js和page2.js 均引用了一个公共模块(log.js),按照demo1的方案来做,最终page1.bundle.js和page2.bundle.js中均含有公共模块(log.js),在项目里是冗余的,我们应该把公共部分提取出来,建立一个commons.js才对。

其实 webpack 加载器代码也是公共部分

我们来修改下webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: {
page1: './src/page1',
page2: './src/page2'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
plugins: [
// 通用代码独立文件插件
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'commons.js',
chunks: ['page1', 'page2'],
minChunks: 2
})
]
}

代码说明

  • 首先需要引入webpack,因为CommonsChunkPlugin是存在于 webpack.optimize.CommonsChunkPlugin 这里的,这个是webapck自带组件,无需npm额外安装。
  • 入口上,我们是用对象表示的,其中page1、page2是叫做chunk(代码块),这个chunk应该是唯一的,如果不唯一,会被覆盖掉。

配置说明

  • name 这个就是最终抽离出来的代码的chunk(代码块)名字,应该是唯一的,必须填。如果与entry等字段的chunk不同,则新建立一个代码块并最终生成单独文件;如果和其他chunk相同,会把其他chunk覆盖掉,最终的文件中就不会有被覆盖的chunk代码的文件了。
  • filename 最终打包文件名字
  • chunks 配置chunks入口,比如当前有5个chunks(page1,page2,page3,page4,page5),但是你只想把page1和page2的chunks进行提取,那么这里只需要配置两个就行了。如果不配置,则表示所有chunks都处理。
  • minChunks 模块最少要被依赖多少次,才能算作公共模块。首先,webpack处理模块部分以及第三方依赖库(如果有的话)会写入commons.js;之后检查每个入口chunk相同的依赖,如果该依赖存在大于等于2次chunk调用(本例子是2个,以此举例),则写入commons.js,否则写入到相应js文件中,就不算做公共代码。如果 minChunks: 1,那么所有以来的组件均算作公共代码了。

都弄好了,我们在执行打包看看效果。

1
npm run webpack

检查下dist目录,多出了一个commons.js,这里面包含了webpack的加载器代码,同时还有公共代码(log.js)。

在看看page1.js和page2.js,每个文件都变得非常小了,之后相应的业务代码,没有了对应的模块被打到当前文件中。

这样,公共模块就提取好啦~