近几年,打包构建工具层出不穷,前有Grunt、Gulp,后有Webpack、Rollup等,它们各有优势,均受到部分开发者的欢迎,本文聊聊Webpack的使用。

模块化

不论是新工具还是新技术,都是为了解决问题而存在,那么构建工具解决什么问题呢?

众所周知,最初的网页十分简单,没有多少交互,代码量也少,但随着技术的发展,JavaScript已经不仅仅用来实现简单的表单提交等功能,引入多个js文件到页面中成为常态,但这种做法有很多缺点:

1)需要手动维护文件的加载顺序。且多个js之间通常有依赖关系,难以清晰分辨谁依赖了谁。

2)每一个<script>标签都需要向服务器发送请求,过多的请求会严重拖慢渲染速度。

3)每个<script>标签都暴露在全局作用域,如果没有任何处理而直接在代码中进行变量或函数声明,就会造成全局污染。

模块化解决了这些问题:

  • 通过分离模块,导入和导出,可以清晰地看到模块间的依赖关系。

  • 借助工具进行打包,页面中只需要加载合并后的资源文件,减少了网络开销。

  • 模块之间作用域隔离,彼此不会有命名冲突。

使用Webpack的理由

打包工具众多,为什么选择Webpack?Webpack具备以下几点优势。

1)默认支持多种模块标准,包括AMD、CommonJS,以及最新的ES6模块。这对于某些同时使用多种模块标准的工程非常有用,Webpack会帮我们处理好不同类型模块之间的依赖关系。

2)完备的代码分割解决方案。可以分割打包后的资源,首屏只加载必要的部分,不重要的放到后面动态加载。这对于体积较大的应用尤为重要,可有效减小资源体积,提升首页渲染速度。

3)可以处理各种类型的资源。除JavaScript以外,还可以处理样式、模板、图片等,而开发者需要做的仅仅是导入它们。比如你可以从JavaScript文件导入一个CSS或者PNG,而这一切最终都可以由下面讲到的loader来处理。

4)庞大的社区支持。除了Webpack核心库以外,还有无数开发者为它编写周边插件和工具,大多数的需求你都可以找到现有解决方案。

配置与方法

看看怎么使用。

依赖Node,这几乎是前端开发的标配,不多说。

学习一种东西的时候最怕看到各种陌生概念,这里先捋一捋。

为了便于理解,按照工作流程的阶段:

entry:流程的入口,告诉webpack从哪个文件开始打包,方式包括:字符串、对象、函数等。

字符串写法

1
2
3
4
5
const config = {
entry: './entry/file.js'
};

module.exports = config;

对象写法

1
2
3
4
5
6
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js' //第三方库入口
}
};

多页面

1
2
3
4
5
6
7
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};

至于函数的方式,可以有逻辑处理的发挥空间,最终返回的还是字符串或者对象。

chunk:字面意思是代码块,存在依赖关系的模块在打包时被封装为一个chunk
bundle:由chunk得到的打包产物

所以三者的关系如图:

先消除一个可能的误解,并非是一个entry项对应一个chunk,对应一个bundle,都可能是多个,后面会再说。

output:设置输出路径和文件

单入口

1
2
3
4
5
6
7
8
const config = {
output: {
filename: 'bundle.js',
path: '/public/assets'
}
};

module.exports = config;

多入口

1
2
3
4
5
6
7
8
9
10
{
entry: {
app: './src/app.js',
about: './src/about.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}

这里就遇到了上面提到的”多对多“的关系。

其中filename是输出资源文件名,不仅可以是名称,还可以是相对路径,而且目录不存在也没关系,会自动创建。

可以看到,filename 使用了[name],这是因为多个文件需要生成多个对应的文件,[name]类似模板语言,意图是根据入口文件动态生成文件名,以确保唯一性。

当然,[name]只是模板变量之一,还有可以控制客户端缓存的[hash][chunkhash]等,可以精确地让相应文件在客户端得到更新。就像这样

1
2
3
output:{
filename:'[name]@[hash].js'
}

loader:字面意思是装载器,可以理解为”预处理器“,Webpack本身只认识JavaScript,对其他类型,比如:样式、图片等,必须预定义一个或多个loader对其进行转译,所以loader赋予webpack处理不同资源的能力,丰富了扩展性。

用法示例如下:

首先说明,loader不是webpack自带的,需要安装,比如我们处理样式。

npm install –save-dev css-loader style-loader

1
2
3
4
5
6
7
8
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}

可以看出,loader的套路很简单:

1) 文件类型
2) 对应loader

需要说明的是:

1) css-loader 本身仅处理样式的加载,并不负责将样式插入页面,所以通常配合 style-loader 一起使用,预处理器同样。
2) use数组当中的loader顺序是有讲究的,它是从后往前进行处理,搞错了顺序同样无法达到想要的效果。

plugin: loader是做某些类型文件的模块转换工作,相比之下,plugin是用来完成一些loader职责之外的任务,更多,更丰富,也增强了webpack的能力。

用法如下:

1
2
3
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]

它的可配置项有很多,这里不再列举,只要知道它是一个具有 apply 属性的 JavaScript ,可以携带参数,所以要向plugin属性传入 new 实例。

配置文件

说到这儿,你可能觉得都是零散的概念,它们应该放在哪儿?

有一种”最佳实践“叫配置分离,即配置文件单独放在一个文件当中,node有package.json,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
//webpack.config.js
var path = require('path');

module.exports = {
mode: 'development', //模式,分为 development 和 production
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

最基本的配置就是这样了,如果看做是一条生产线的话,就是从入口文件进,从dist输出。

实际开发中会加入更多逻辑和工具,代码量会大大增加,但使用方法类似。

更多配置

常用loader

说到这儿,你可能会问,我知道webpack拿loader作为工具,但有哪些工具可用呢?下面介绍几个:

  • babel-loader

用途大家都很熟,把ES6+代码编译为ES5,可以让大家在浏览器支持度不是很充分的情况下用新方法编码。

推荐安装:babel-loader @babel/core @babel/preset-env

  • ts-loader

用于连接Webpack和Typescript。

  • html-loader

前面说过,Webpack只认识js,这个loader用于将HTML文件转化为字符串并格式化,通过js加载。

  • file-loader

打包文件类型资源,返回publicPath。
对publicPath稍作解释,前面我们看到过path,它是资源打包路径,而publicPath是资源引用路径,即页面当中做引用的静态文件(图片等)。

  • vue-loader

这个应该很多人在用,处理vue组件,除此之外,可能还要安装vue-template-compiler以及前面提到的样式处理loader等。

更多loader

常用插件

  • html-webpack-plugin

自动生成html文件,并且引用相关的 assets 文件。

  • mini-css-extract-plugin

分离CSS,将CSS提取到单独的文件中,支持CSS和sourceMap的按需加载。

  • uglifyjs-webpack-plugin

对js进行压缩混淆。

  • Hot Module Replacement

浏览器自动更新,实时预览修改效果

  • CommonsChunkPlugin/SplitChunks

把多个chunk中的公共部分提取出来,减少重复打包,缩小资源提及,可以更有效利用客户端缓存。

更多插件

总结

文章已经有点长,但仍有很多东西没有讲到,没有深入,旨在跟大家分享webpack的用途以及大致用法,更详细内容及工具可移步官网查看。

但对于建立初步的认识应该足够,剩下的,各公司或者业务的特点都不一样,大家可根据具体情况进行定制,总之,工具是为我所用的,是为开发者提供便利的,而不是拦路虎,应该学会并掌握它。

下篇见!~