webpack配置

webpack作为前端构建的一个工具🔧,就需要知道其一些基本或高级的配置和一些常用的性能优化的方法。

一、webpack的基本配置

拆分配置和merge

在项目开发中,一般会将配置拆分成3部分

  • webpack.common.js(公共部分)
  • webpack.dev.js(开发环境)
  • webpack.prod.js(线上环境)

在打包构建时,只需添加多个命令即可。

1
2
3
4
5
6
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"devBuild": "webpack --config build-base-conf/webpack.dev.js",
"dev": "webpack-dev-server --config build-base-conf/webpack.dev.js",
"build": "webpack --config build-base-conf/webpack.prod.js"
},

path.js

1
2
3
4
5
6
7
8
9
10
// 常用文件夹路径
const path = require('path')

const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
srcPath,
distPath
}

webpack.common.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath } = require('./paths')

module.exports = {
// 入口文件
entry: path.join(srcPath, 'index'),
module: {
rules: [
{
test: /\.js$/,
loader: ['babel-loader'],
include: srcPath,
exclude: /node_modules/
},
{
test: /\.css$/,
// loader 的执行顺序是:从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' ,注意顺序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html'
})
]
}

webpack.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
mode: 'development',
module: {
rules: [
// 直接引入图片 url
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
// window.ENV = 'development'
ENV: JSON.stringify('development')
})
],
devServer: {
port: 8080,
progress: true, // 显示打包的进度条
contentBase: distPath, // 根目录
open: true, // 自动打开浏览器
compress: true, // 启动 gzip 压缩

// 设置代理
proxy: {
// 将本地 /api/xxx 代理到 localhost:3000/api/xxx
'/api': 'http://localhost:3000',

// 将本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2': {
target: 'http://localhost:3000',
pathRewrite: {
'/api2': ''
}
}
}
}
})

webpack.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
mode: 'production',
output: {
filename: 'bundle.[contentHash:8].js', // 打包代码时,加上 hash 戳
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
},
module: {
rules: [
// 图片 - 考虑 base64 编码的情况
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 5 * 1024,

// 打包到 img 目录下
outputPath: '/img1/',

// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
// publicPath: 'http://cdn.abc.com'
}
}
},
]
},
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('production')
})
]
})

启动本地服务

启动本地服务实在开发环境的配置文件中添加webpack-dev-server。在上面的dev配置文件中有添加devServer

处理ES6

处理ES6使用的是babel-loader。添加在公共的配置中。

1
2
3
4
5
6
{
test: /\.js$/,
loader: ['babel-loader'],
include: srcPath,
exclude: /node_modules/
},

使用babel-loader需要添加一个.babelrc文件。会在后面讲到具体配置。

1
2
3
4
{
"presets": ["@babel/preset-env"],
"plugins": []
}

处理样式文件

处理样式文件需要使用到style-loadercss-loaderpostcss-loader。一般添加在公共的配置文件中。如果有需要进行优化的,可以分开进行配置,后面会讲到。

1
2
3
4
5
6
7
8
9
10
{
test: /\.css$/,
// loader 的执行顺序是:从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' ,注意顺序
loader: ['style-loader', 'css-loader', 'less-loader']
}

postcss-loader: 浏览器兼容性,使浏览器不支持的样式语法改为支持的

使用postcss-loader需要添加一个文件配置postcss.config.js

1
2
3
module.exports = {
plugins: [require('autoprefixer')]
}

处理图片文件

在开发环境中使用file-loader

1
2
3
4
5
// 直接引入图片 url
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}

在线上环境配置文件中使用url-loader,考虑图片大小,考虑使用base64编码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 5 * 1024,

// 打包到 img1 目录下
outputPath: '/img1/',
}
}
},

模块化

二、webpack的高级配置

配置多入口

在某些情况下是需要配置多入口的,如有两个入口文件为index.jsother.js。分别与之对应的是index.htmlother.html文件。

  1. 修改entry入口。在公共配置中。
1
2
3
4
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
  1. 修改多入口的html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
plugins: [
// new HtmlWebpackPlugin({
// template: path.join(srcPath, 'index.html'),
// filename: 'index.html'
// })

// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index'] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other'] // 只引用 other.js
})
]
  1. 修改线上配置的输出的文件名称
1
2
3
4
5
6
mode: 'production',
output: {
// filename: 'bundle.[contentHash:8].js', // 打包代码时,加上 hash 戳
filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
path: distPath,
}

抽离压缩CSS文件

在上面👆讲到的样式文件的处理是配置在公共文件中的。这在开发环境下使用style-loader是没有问题的。但是如果是在线上环境中,这个loader会将样式直接插入到js文件中,那么需要直接js代码才能将样式解析出来,这个是有问题的。所以需要对此进行优化。

  1. 删除公共配置中的样式处理的loader,在各自的配置文件中去配置。
  2. 开发配置文件中是和之前的公共配置文件保持一致。
  3. 线上环境需要对样式文件进行抽离和压缩
1
2
3
4
// 引入三个插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 抽离 css
{
test: /\.css$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'postcss-loader'
]
},
// 抽离 less --> css
{
test: /\.less$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'less-loader',
'postcss-loader'
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('production')
}),

// 抽离 css 文件
new MiniCssExtractPlugin({
filename: 'css/main.[contentHash:8].css' // 打包后存放的路径以及文件名称
})
],

optimization: {
// 压缩 css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

抽离公共代码和第三方代码

抽离代码是对于线上环境而言的,开发环境不需要这些操作。抽离公共代码到一个单独的chunk,可以减少打包后JS代码的体积,优化请求的速度。对于第三方代码,由于第三方插件的版本不会被经常改动,所以可以将第三方代码抽离到一个单独的chunk,代码不变,可以命中缓存,优化前端性能。

在线上环境配置文件中添加以下代码

  1. 分割代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
optimization: {
// 压缩 css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],

// 分割代码块
splitChunks: {
chunks: 'all',
// initial 入口 chunk,对于异步导入的文件不处理
// async 异步 chunk,只对异步导入的文件处理
// all 全部 chunk

// 缓存分组
cacheGroups: {
// 第三方模块
vendor: {
name: 'vendor', // chunk 名称
priority: 1, // 权限更高,优先抽离,重要!!!
test: /node_modules/,
minSize: 0, // 大小限制(根据项目自己定制)
minChunks: 1 // 最少复用过几次
},
// 公共的模块(被多个文件import后使用)
common: {
name: 'common', // chunk 名称
priority: 0, // 优先级
minSize: 0, // 公共模块的大小限制(根据项目自己定制)
minChunks: 2 // 公共模块最少复用过几次
}
}
}
}
  1. 修改html引用的chunks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
plugins: [
// new HtmlWebpackPlugin({
// template: path.join(srcPath, 'index.html'),
// filename: 'index.html'
// })

// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index', 'vendor', 'common'] // 要考虑代码分割
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other', 'common'] // 考虑代码分割
})
]

懒加载

对于一个比较大的JS文件进行懒加载,只需要使用import()语法即可。懒加载不需要对``webpack进行多余的配置,webpack`是原生支持的。

1
2
3
4
5
6
7
8
9
10
11
12
13
// dynamic-data.js
export default {
message: 'this is dynamic data'
}


// index.js
// 引入动态数据 --- 懒加载
setTimeout(() => {
import('./dynamic-data').then(res => {
console.log(res.default.message) // 注意这个default
})
}, 1500);

打包构建的话,会自动生成一个bundle文件。如:2.5d716347.js

如上代码,运行1.5秒后才会去请求这个js文件

处理JSX和Vue

处理JSX使用babel中的@babel/preset-react

处理Vue需要配置webpack,添加vue-loaders

三、module,chunk,bundle的区别

  • module:各个源码文件,webpack中一切皆模块
  • chunk:多模块合并成的,如entry,import,splitchunk
  • 最终的输出文件

四、webpack的性能优化

开发和线上环境均可用的方法

优化babel-loader

1
2
3
4
5
6
{
test: /\.js$/,
loader: ['babel-loader?cacheDirectory'],
include: srcPath,
// exclude: /node_modules/
},

加上cacheDirectory,当代码没有修改,再次使用babel解析时,会使用缓存。

IgnorePlugin忽略某些模块

例如项目中使用了momonet这个日期📅库。但是这个库的体积是很大的,有360多kb,压缩后也有60多kb。是因为这个库的语言包很多导致体积很大。所以可以忽略这个模块,使用时只引入需要的语言包,如中文和英文。

1
2
3
4
5
6
// 在线上配置文件的plugin中添加
// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin(/\.\/locale/, /moment/),

// 引入需要的语言包
import 'moment/locale/zh-cn'

noParse避免重复打包

例如,对完整的react.min.js文件就没有必要采用模块化,忽略对这类文件的递归解析处理

1
2
3
4
5
6
module.exports = {
//...
module: {
noParse: /jquery|lodash/,
}
};

happyPack多进程打包

JS时单线程,使用happyPack开启多进程打包,主要是用于loader

例如使用happyPack开启多线程对babel-loader解析进行加速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// js
{
test: /\.js$/,
// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
include: srcPath,
// exclude: /node_modules/
},


plugins: [
// happyPack 开启多进程打包
new HappyPack({
// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
id: 'babel',
// 如何处理 .js 文件,用法和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory']
}),
]

ParallelUglifyPlugin多进程压缩

推荐在线上环境上使用;本地开发不推荐,不需要去压缩代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
// 传递给 UglifyJS 的参数
// (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
uglifyJS: {
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
},
compress: {
// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})

只能在开发环境上使用的优化方法

浏览器自动刷新

开发环境使用了devServer后,自动开启了自动刷新

热更新

使用HotModuleReplacementPlugin这个插件,但是不推荐使用,除了在webpack中配置,还需要在代码中进行判断。

DllPlugin动态链接库

五、webpack优化产出代码

小图片base64编码

bundle加hash

懒加载

提取公共代码

IgnorePlugin

使用CDN

mode使用production

  • 自动开启代码压缩
  • Vue和React会自动删除掉调试代码(如开发环境的警告⚠️)
  • 启动Tree-Shaking

Scope Hosting

Author: YangLeLe
Link: http://younglele.cn/webpack-config/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.