前言
作为一门前端程序员,在日常的开发中难免要与各种各样的框架打交道,而框架的使用又需要用到脚手架,比如使用vue时需要用到vue cli。如果在开发过程中我们需要在现有的脚手架的基础上进行功能的增强,那么势必需要用到webpack的知识,因为几乎目前流行的框架比如vue,react的脚手架都是基于webpack搭建的。
所以学习webpack知识不可谓不重要。
本文将带你从零到一的搭建一个可以使用的webpack，帮助你梳理有关于webpack的基本知识以及如何利用webpack对项目进行优化。
一.Webpack基本概念
1.1Webpack是什么?
简单来讲,webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
1.2 Webpack中的bundle、module、chunk分别是什么？
一句话总结: module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：
我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。
为了避免本文章篇幅太长,这里就只讲结论,过程相关大家可以去看这篇文章:
webpack中的bundle、module、chunk分别是什么
1.3 Webpack中的Loader、Plugin分别是什么？
Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解JS)
插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
-
loader 和 plugin 的不同：（plugin 一定要先引入才能使用）
loader：1. 下载 2. 使用（配置 loader）
plugins：1.下载 2. 引入 3. 使用
二.Webpack核心概念
2.1 entry
入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
三种形式:
- string --> './src/index.js'，单入口 打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main
- array --> ['./src/index.js', './src/add.js']，多入口 所有入口文件最终只会形成一个 chunk，输出出去只有一个 bundle 文件。 （一般只用在 HMR 功能中让 html 热更新生效）
- object，多入口 有几个入口文件就形成几个 chunk，输出几个 bundle 文件，此时 chunk 的名称是 key 值
--> 特殊用法：
entry: {
// 最终只会形成一个chunk, 输出出去只有一个bundle文件。
index: ['./src/index.js', './src/count.js'],
// 形成一个chunk，输出一个bundle文件。
add: './src/add.js'
}
2.2 output
输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
output: {
// 文件名称（指定名称+目录）
filename: 'js/[name].js',
// 输出文件目录（将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
// 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name]_chunk.js', // 指定非入口chunk的名称
library: '[name]', // 打包整个库后向外暴露的变量名
libraryTarget: 'window' // 变量名添加到哪个上 browser：window
// libraryTarget: 'global' // node：global
// libraryTarget: 'commonjs' // conmmonjs模块 exports
},
2.3 module
module: {
rules: [
// loader的配置
{
test: /\.css$/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_modules/,
// 只检查src下的js文件
include: resolve(__dirname, 'src'),
enforce: 'pre', // 优先执行
// enforce: 'post', // 延后执行
// 单个loader用loader
loader: 'eslint-loader',
options: {} // 指定配置选项
},
{
// 以下配置只会生效一个
oneOf: []
}
]
},
2.4 resolve
// 解析模块的规则
resolve: {
// 配置解析模块路径别名: 优点：当目录层级很复杂时，简写路径；缺点：路径不会提示
alias: {
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径的后缀名（引入时就可以不写文件后缀名了）
extensions: ['.js', '.json', '.jsx', '.css'],
// 告诉 webpack 解析模块应该去找哪个目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}
2.5 dev server
devServer: {
// 运行代码所在的目录
contentBase: resolve(__dirname, 'build'),
// 监视contentBase目录下的所有文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 不要显示启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本信息外，其他内容都不要显示
quiet: true,
// 如果出错了，不要全屏提示
overlay: false,
// 服务器代理，--> 解决开发环境跨域问题
proxy: {
// 一旦devServer(5000)服务器接收到/api/xxx的请求，就会把请求转发到另外一个服务器3000
'/api': {
target: 'http://localhost:3000',
// 发送请求时，请求路径重写：将/api/xxx --> /xxx （去掉/api）
pathRewrite: {
'^/api': ''
}
}
}
}
2.6 optimization
optimization: {
splitChunks: {
chunks: 'all',
/* 以下都是splitChunks默认配置，可以不写
miniSize: 30 * 1024, // 分割的chunk最小为30kb（大于30kb的才分割）
maxSize: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量为5
maxInitialRequests: 3, // 入口js文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name: true, // 可以使用命名规则
cacheGroups: { // 分割chunk的组
vendors: {
// node_modules中的文件会被打包到vendors组的chunk中，--> vendors~xxx.js
// 满足上面的公共规则，大小超过30kb、至少被引用一次
test: /[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
prority: -20,
// 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包
reuseExistingChunk: true
}
} */
},
// 将index.js记录的a.js的hash值单独打包到runtime文件中
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案：js/css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启用sourceMap(否则会被压缩掉)
sourceMap: true
})
]
}
2.7 mode
模式(Mode)：指示 webpack 使用相应模式的配置。
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
| production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。 | 能让代码优化上线运行的环境 |
注意: 以上所有配置大家都没有必要去刻意记忆,而是在用到的使用去查阅此文章或者官网。这样学习webpack起来才会事半功倍。
三.Webpack基本使用
讲完了基本概念,我们开始试着使用一下webpack吧。
3.1初始化配置
- 初始化 package.json：npm init
- 下载安装webpack：(webpack4以上的版本需要全局/本地都安装webpack-cli) 全局安装：cnpm i webpack webpack-cli -g 本地安装：cnpm i webpack webpack-cli -D
注意:这里给大家两个建议.
- 尽量使用本地安装,为了方便不同项目中使用不同版本的webpack
- 尽量安装低版本的依赖,比如这里我使用的webpack 4版本,webpack cli 3版本,其他一些比如less,less-loader也尽可能不要使用最新版本,因为作为一些新手,我们的出发点为学习,所以首要目的是尽可能的让项目跑起来。
新建一个文件夹src ,然后新建一个文件main.js,写一点代码测试一下
console.log('嘿嘿')
配置package.json命令
执行
npm run build
此时如果生成了一个dist文件夹，并且内部含有main.js说明已经打包成功了
以上便是webpack最基本的使用,但是显然离正式使用还有点距离。
下面我们进行开发环境的基本配置。
四.Webpack开发环境基本配置
webpack.config.js 是 webpack 的配置文件。
作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs。
开发环境配置主要是为了能让代码运行。主要考虑以下几个方面：
- 打包 html 资源
- 打包样式资源
- 打包图片资源
- 打包其他资源
- devServer
在src中新建一个webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
mode:'development', // 开发模式
entry: path.resolve(__dirname,'../src/js/index.js'), // 入口文件
output: {
filename: 'js/build.js', // 打包后的文件名称
path: path.resolve(__dirname,'build') // 打包后的目录
},
}
更改我们的打包命令
执行 npm run build 会发现生成了以下目录
其中dist文件夹中的main.js就是我们需要在浏览器中实际运行的文件
4.1 打包html资源
webpack无法识别html文件,因此我们需要安装一个插件html-webpack-plugin
npm i html-webpack-plugin -D
html-webpack-plugin可以帮我们做两件事
- 默认会创建一个空的html文件,如果有模板的话会复制模板
- 自动引入打包输出的所有资源（JS/CSS
我们可以在创建index.html
具体配置文件如下
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development', // 开发模式
entry: path.resolve(__dirname,'../src/js/index.js'), // 入口文件
output: {
filename: 'js/build.js', // 打包后的文件名称
path: path.resolve(__dirname,'build') // 打包后的目录
},
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'./src/index.html')
})
]
}
4.2 打包样式资源
webpack无法识别css文件,因此我们需要安装两个loader,style-laoder,css-loader
npm i -D style-loader css-loader
如果我们使用less来构建样式，则需要多安装两个
npm i -D less less-loader
注意: use数组中loader执行顺序：从右到左，从下到上，依次执行(先执行css-loader)
style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
less-loader：将less文件编译成css文件，需要下载less-loader和less
配置文件如下
// webpack.config.js
module.exports = {
// ...省略其他配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] // 从右向左解析原则
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
}
]
}
}
4.3 打包图片资源
webpack无法识别图片文件,因此我们需要安装两个url-loader,file-loader
file-loader 将文件 import / require （）解析为url，并将该文件发射到输出目录中。
url-loader 可以识别图片的大小，然后把图片转换成base64，从而减少代码的体积，如果图片超过设定的现在，就还是用file-loader来处理。
// webpack.config.js
module.exports = {
// ...省略其他配置
module:{
rules:[
{
test: /\.(jpe?g|png|gif)$/i, //图片文件
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
}
]
}
}
4.4 打包其他资源
file-loader除了可以打包图片资源以外还可以打包字体,视频,音频等其他资源。
{
// 排除html|js|css|less|jpg|png|gif文件
exclude: /\.(html|js|css|less|jpg|png|gif)/,
// file-loader：处理其他文件
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media',
},
devServer
除了以上的资源打包以外,我们为了方便开发还需要利用开发服务器devServer。
npm i webpack-dev-server -D
开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出（不会像之前那样在外面看到打包输出的build包，而是在内存中，关闭后会自动删除）
启动devServer指令为：npx webpack-dev-server
下面是一个简单的开发环境webpack.confg.js配置文件
// resolve用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引用plugin
module.exports = {
// webpack配置
entry: './src/js/index.js', // 入口起点
output: {
// 输出
// 输出文件名
filename: 'js/build.js',
// __dirname是nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'), // 输出路径，所有资源打包都会输出到这个文件夹下
},
// loader配置
module: {
rules: [
// 详细的loader配置
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
test: /\.less$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序：从右到左，从下到上，依次执行(先执行css-loader)
// style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
'style-loader',
// css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader',
// less-loader：将less文件编译成css文件，需要下载less-loader和less
'less-loader'
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
// url-loader：处理图片资源，问题：默认处理不了html中的img图片
test: /\.(jpg|png|gif)$/,
// 需要下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理，优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大（文件请求速度更慢）
// base64在客户端本地解码所以会减少服务器压力，如果图片过大还采用base64编码会导致cpu调用率上升，网页加载时变卡
limit: 8 * 1024,
// 给图片重命名，[hash:10]：取图片的hash的前10位，[ext]：取文件原来扩展名
name: '[hash:10].[ext]',
// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是conmonjs，解析时会出问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
outputPath: 'imgs',
},
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader',
},
// 打包其他资源(除了html/js/css资源以外的资源)
{
// 排除html|js|css|less|jpg|png|gif文件
exclude: /\.(html|js|css|less|jpg|png|gif)/,
// file-loader：处理其他文件
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media',
},
},
],
},
// plugin的配置
plugins: [
// html-webpack-plugin：默认会创建一个空的html文件，自动引入打包输出的所有资源（JS/CSS）
// 需要有结构的HTML文件可以加一个template
new HtmlWebpackPlugin({
// 复制这个./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html',
}),
],
// 模式
mode: 'development', // 开发模式
// 开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：只会在内存中编译打包，不会有任何输出（不会像之前那样在外面看到打包输出的build包，而是在内存中，关闭后会自动删除）
// 启动devServer指令为：npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
},
}
其中，大部分配置都在注释中给出解释。
- 运行项目的两个指令： webpack 会将打包结果输出出去（build文件夹） npx webpack-dev-server 只会在内存中编译打包，没有输出
五.Webpack生产环境基本配置
而生产环境的配置需要考虑以下几个方面：
- 提取 css 成单独文件
- css 兼容性处理
- 压缩 css
- js 语法检查
- js 兼容性处理
- js 压缩
- html 压缩
5.1 提取css成单独文件
npm i -D mini-css-extract-plugin
配置文件如下
webpack 4.0以前，我们通过
extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
//...省略其他配置
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/built.css",
})
]
}
5.2 css兼容性处理
postcss-loader：css兼容性处理：postcss --> 需要安装：postcss-loader postcss-preset-env
postcss需要通过package.json中browserslist里面的配置加载指定的css兼容性样式
在package.json中定义browserslist：
"browserslist": {
// 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
"development": [ // 只需要可以运行即可
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境。默认是生产环境
"production": [ // 需要满足绝大多数浏览器的兼容
">0.2%",
"not dead",
"not op_mini all"
]
},
配置文件如下
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
//...省略其他配置
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss', // 基本写法
plugins: () => [
// postcss的插件
require('postcss-preset-env')(),
],
},
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/built.css",
})
]
}
5.3 压缩css
npm i OptimiziCssAssetsWebpackPlugin -D
配置文件如下
const OptimiziCssAssetsWebpackPlugin = require('optimizi-css-assets-webpack-plugin')
//省略配置
new OptimiziCssAssetsWebpackPlugin ()
5.4 js 语法检查
正常来讲，一个文件只能被一个loader处理 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序 先执行eslint再执行babel（用enforce）
js的语法检查： 需要下载 eslint-loader eslint 注意：只检查自己写的源代码，第三方的库是不用检查的 airbnb(一个流行的js风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import 设置检查规则： package.json中eslintConfig中设置
"eslintConfig": {
"extends": "airbnb-base"， // 继承airbnb的风格规范
"env": {
"browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
}
}
配置文件如下
module.exports = {
//...省略其他配置
module: {
rules: [
test: /\.js$/,
exclude: /node_modules/, // 忽略node_modules
enforce: 'pre', // 优先执行
loader: 'eslint-loader',
options: {
// 自动修复
fix: true,
},
},
]
},
5.5 js兼容性处理
js兼容性处理：需要下载 babel-loader @babel/core
- 基本js兼容性处理 --> @babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换
- 全部js兼容性处理 --> @babel/polyfill 问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
- 需要做兼容性处理的就做：按需加载 --> core-js
module.exports = {
//...省略其他配置
module: {
rules: [
{
// 第三种方式：按需加载
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎样的兼容性处理
presets: [
'@babel/preset-env', // 基本预设
{
useBuiltIns: 'usage', //按需加载
corejs: { version: 3 }, // 指定core-js版本
targets: { // 指定兼容到什么版本的浏览器
chrome: '60',
firefox: '50',
ie: '9',
safari: '10',
edge: '17'
},
},
],
},
},
]
},
5.6 js 压缩
生产环境下自动压缩js
mode: 'production'
5.7 html压缩
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
}),
六.Webpack性能优化
6.1优化打包构建速度
6.1.1 oneOf
oneOf：匹配到 loader 后就不再向后进行匹配，优化生产环境的打包构建速度
module: {
rules: [
{
// js 语法检查
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// oneOf 优化生产环境的打包构建速度
// 以下loader只会匹配一个（匹配到了后就不会再往下匹配了）
// 注意：不能有两个配置处理同一种类型文件（所以把eslint-loader提取出去放外面）
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
// js 兼容性处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
6.1.2 babel 缓存
babel 缓存：类似 HMR，将 babel 处理后的资源缓存起来（哪里的 js 改变就更新哪里，其他 js 还是用之前缓存的资源），让第二次打包构建速度更快
代码：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 开启babel缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory: true
}
},
文件资源缓存
文件名不变，就不会重新请求，而是再次用之前缓存的资源
1.hash: 主要用于开发环境中，在构建的过程中，当你的项目有一个文件发现了改变，整个项目的hash值就会做修改(整个项目的hash值是一样的)，这样子，每次更新，文件都不会让浏览器缓存文件，保证了文件的更新率，提高开发效率。
问题：重新打包，所有文件的 hsah 值都改变，会导致所有缓存失效。（可能只改动了一个文件）
2.chunkhash：根据 chunk 生成的 hash 值。来源于同一个 chunk的 hash 值一样
问题：js 和 css 来自同一个chunk，hash 值是一样的（因为 css-loader 会将 css 文件加载到 js 中，所以同属于一个chunk）
3.contenthash: 根据文件的内容生成 hash 值。不同文件 hash 值一定不一样(文件内容修改，文件名里的 hash 才会改变)
修改 css 文件内容，打包后的 css 文件名 hash 值就改变，而 js 文件没有改变 hash 值就不变，这样 css 和 js 缓存就会分开判断要不要重新请求资源 --> 让代码上线运行缓存更好使用
6.1.3 多进程打包
多进程打包：某个任务消耗时间较长会卡顿，多进程可以同一时间干多件事，效率更高。
优点是提升打包速度，缺点是每个进程的开启和交流都会有开销（babel-loader消耗时间最久，所以使用thread-loader针对其进行优化）
{
test: /\.js$/,
exclude: /node_modules/,
use: [
/*
thread-loader会对其后面的loader（这里是babel-loader）开启多进程打包。
进程启动大概为600ms，进程通信也有开销。(启动的开销比较昂贵，不要滥用)
只有工作消耗时间比较长，才需要多进程打包
*/
{
loader: 'thread-loader',
options: {
workers: 2 // 进程2个
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 开启babel缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
]
},
6.1.5 externals
externals：让某些库不打包，通过 cdn 引入
webpack.config.js 中配置：
externals: {
// 拒绝jQuery被打包进来(通过cdn引入，速度会快一些)
// 忽略的库名 -- npm包名
jquery: 'jQuery'
}
需要在 index.html 中通过 cdn 引入：
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
6.1.6 dll
dll：让某些库单独打包，后直接引入到 build 中。可以在 code split 分割出 node_modules 后再用 dll 更细的分割，优化代码运行的性能。
webpack.dll.js 配置：(将 jquery 单独打包)
/*
node_modules的库会打包到一起，但是很多库的时候打包输出的js文件就太大了
使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
当运行webpack时，默认查找webpack.config.js配置文件
需求：需要运行webpack.dll.js文件
--> webpack --config webpack.dll.js（运行这个指令表示以这个配置文件打包）
*/
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
// 最终打包生成的[name] --> jquery
// ['jquery] --> 要打包的库是jquery
jquery: ['jquery']
},
output: {
// 输出出口指定
filename: '[name].js', // name就是jquery
path: resolve(__dirname, 'dll'), // 打包到dll目录下
library: '[name]_[hash]', // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins: [
// 打包生成一个manifest.json --> 提供jquery的映射关系（告诉webpack：jquery之后不需要再打包和暴露内容的名称）
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射库的暴露的内容名称
path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
})
],
mode: 'production'
};
webpack.config.js 配置：(告诉 webpack 不需要再打包 jquery，并将之前打包好的 jquery 跟其他打包好的资源一同输出到 build 目录下)
// 引入插件
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
// plugins中配置：
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出到build目录下，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
6.2 优化代码运行的性能
6.2.1 tree shaking（树摇）
tree shaking：去除无用代码
前提：1. 必须使用 ES6 模块化 2. 开启 production 环境 （这样就自动会把无用代码去掉）
作用：减少代码体积
在 package.json 中配置：
"sideEffects": false 表示所有代码都没有副作用（都可以进行 tree shaking）
这样会导致的问题：可能会把 css / @babel/polyfill 文件干掉（副作用）
所以可以配置："sideEffects": ["*.css", "*.less"] 不会对css/less文件tree shaking处理
6.2.2 code split（代码分割）
代码分割。将打包输出的一个大的 bundle.js 文件拆分成多个小文件，这样可以并行加载多个文件，比加载一个文件更快。
1.多入口拆分
entry: {
// 多入口：有一个入口，最终输出就有一个bundle
index: './src/js/index.js',
test: './src/js/test.js'
},
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
2.optimization：
optimization: {
splitChunks: {
chunks: 'all'
}
},
- 将 node_modules 中的代码单独打包（大小超过30kb）
- 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk(比如两个模块中都引入了jquery会被打包成单独的文件)（大小超过30kb）
3.import 动态导入语法：
/*
通过js代码，让某个文件被单独打包成一个chunk
import动态导入语法：能将某个文件单独打包(test文件不会和index打包在同一个文件而是单独打包)
webpackChunkName:指定test单独打包后文件的名字
*/
import(/* webpackChunkName: 'test' */'./test')
.then(({ mul, count }) => {
// 文件加载成功~
// eslint-disable-next-line
console.log(mul(2, 5));
})
.catch(() => {
// eslint-disable-next-line
console.log('文件加载失败~');
});
6.2.3 lazy loading（懒加载/预加载）
1.懒加载：当文件需要使用时才加载（需要代码分割）。但是如果资源较大，加载时间就会较长，有延迟。
2.正常加载：可以认为是并行加载（同一时间加载多个文件）没有先后顺序，先加载了不需要的资源就会浪费时间。
3.预加载 prefetch（兼容性很差）：会在使用之前，提前加载。等其他资源加载完毕，浏览器空闲了，再偷偷加载这个资源。这样在使用时已经加载好了，速度很快。所以在懒加载的基础上加上预加载会更好。
代码：
document.getElementById('btn').onclick = function() {
// 将import的内容放在异步回调函数中使用，点击按钮，test.js才会被加载(不会重复加载)
// webpackPrefetch: true表示开启预加载
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
console.log(mul(4, 5));
});
import('./test').then(({ mul }) => {
console.log(mul(2, 5))
})
};
参考代码
由于作者本人能力优先,可能上述有些部分描写的有些乱。
大家可以参考Webpack-study。里面有上述降到的所有代码,可以复杂大家理解。
