webpack
前言
此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈
吐槽： 提到 webpack 真是一把伤心泪 还记得 weboack1.0 版本刚出来的时候 我按照文档撸了一遍配置项 和官网一样的配置就是各种报错 看都看不懂 那时候加上刚做前端不久 真是 webpack 从入门到放弃 尤其是现在面试前端高级职位时 你会发现面试官特别喜欢问 webpack 相关的东西 我见过的几个大厂面试 自我介绍完了就开始撸 webpack 了 哈哈（也许是我简历有写一些架构经验）
改观： 目前 webpack 已经到了 4.0 版本 官方文档和很多东西都进行了优化 现在使用更简单 加上各种脚手架基本帮我们配置好了 webpack 但是这并不代表我们不需要知道 webpack 原理 因为站在前端架构的角度去分析 前端自动化打包这一块是必须要精通的 同时作为中高级前端 对于前端工具也是必须要牢牢掌握的
目录 [隐藏]
1 webpack 是什么
webpack 是自动化打包解决方案，也可以理解为是一个模块打包机。它帮助我们分析项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。
如果没有 webpack 我们手动去处理上诉的事情该多麻烦
2 webpack 常见有哪些配置
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
- mode：提供 mode 配置选项，告知 webpack 使用相应模式的内置优化
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
- Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
3 webpack 工作流程
- 参数解析：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
- 找到入口文件：从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module
- 调用 Loader 编译文件：每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则
- 遍历 AST，收集依赖：对 Module 进行转换后，再解析出当前 Module 依赖的 Module
- 生成 Chunk：这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk
- 输出文件：最后 Webpack 会把所有 Chunk 转换成文件输出
想看具体的 webpack 编译原理源码的同学 传送门
4 常见 Loader 配置以及工作流程
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{ test: /\.js$/, use: 'babel-loader' },
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
]
}
]
}
};
Loader 工作流程
- webpack.config.js 里配置了一个 模块 的 Loader；
- 遇到 相应模块 文件时，触发了 该模块的 loader;
- loader 接受了一个表示该 模块 文件内容的 source;
- loader 使用 webapck 提供的一系列 api 对 source 进行转换，得到一个 result;
- 将 result 返回或者传递给下一个 Loader，直到处理完毕。
看看 less-loader 的例子（具体的 loader 实现可以看官网例子）
let less = require('less');
module.exports = function (source) {
const callback = this.async();
//this.async() 返回一个回调函数，用于异步执行
less.render(source, (err, result) => {
//使用less处理对应的less文件的source
callback(err, result.css);
});
}
5 常见 plugin 配置以及简易原理
项目常用插件介绍
- extract-text-webpack-plugin
webpack 默认会将 css 当做一个模块打包到一个 chunk 中，extract-text-webpack-plugin 的作用就是将 css 提取成独立的 css 文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
new ExtractTextPlugin({
filename: 'css/[name].css',
})
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader','postcss-loader','less-loader'],
fallback: 'vue-style-loader', #使用vue时要用这个配置
})
},
- html-webpack-plugin
这个插件很重要，作用一是创建 HTML 页面文件到你的输出目录，作用二是将 webpack 打包后的 chunk 自动引入到这个 HTML 中
const HtmlPlugin = require('html-webpack-plugin')
new HtmlPlugin({
filename: 'index.html',
template: 'pages/index.html'
}
- DefinePlugin
定义全局常量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
},
PRODUCTION: JSON.stringify(PRODUCTION),
APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),
}),
- UglifyJsPlugin
js 压缩
new webpack.optimize.UglifyJsPlugin()
注意: webpack4 已经移除了该插件，用 optimization.minimize 替代
- CommonsChunkPlugin
CommonsChunkPlugin 主要是用来提取第三方库（如 jQuery）和公共模块(公共 js，css 都可以)，常用于多页面应用程序，生成公共 chunk，避免重复引用。
{
entry: {
vendor: 'index.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor','runtime'],
filename: '[name].js'
}),
]
}
注意: webpack4 已经移除了该插件，用 optimization.SplitChunks 替代
简易原理
插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在编译过代码程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
webpack 插件由以下组成：
- 一个 JavaScript 命名函数。
- 在插件函数的 prototype 上定义一个 apply 方法。
- 指定一个绑定到 webpack 自身的事件钩子。
- 处理 webpack 内部实例的特定数据。
- 功能完成后调用 webpack 提供的回调
自定义插件例子（更多知识请看官网创建插件）
// 一个 JavaScript 命名函数。
function MyExampleWebpackPlugin() {
};
// 在插件函数的 prototype 上定义一个 `apply` 方法。
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
// 指定一个挂载到 webpack 自身的事件钩子。
compiler.plugin('webpacksEventHook', function(compilation /* 处理 webpack 内部实例的特定数据。*/, callback) {
console.log("This is an example plugin!!!");
// 功能完成后调用 webpack 提供的回调。
callback();
});
};
6 webpack 打包速度太慢怎么办
- 缩小编译范围，减少不必要的编译工作，即 modules、mainFields、noParse、includes、exclude、alias 全部用起来。
const resolve = dir => path.join(__dirname, '..', dir);
resolve: {
modules: [ // 指定以下目录寻找第三方模块，避免webpack往父级目录递归搜索
resolve('src'),
resolve('node_modules'),
resolve(config.common.layoutPath)
],
mainFields: ['main'], // 只采用main字段作为入口文件描述字段，减少搜索步骤
alias: {
vue$: "vue/dist/vue.common",
"@": resolve("src") // 缓存src目录为@符号，避免重复寻址
}
},
module: {
noParse: /jquery|lodash/, // 忽略未采用模块化的文件，因此jquery或lodash将不会被下面的loaders解析
// noParse: function(content) {
// return /jquery|lodash/.test(content)
// },
rules: [
{
test: /\.js$/,
include: [ // 表示只解析以下目录，减少loader处理范围
resolve("src"),
resolve(config.common.layoutPath)
],
exclude: file => /test/.test(file), // 排除test目录文件
loader: "happypack/loader?id=happy-babel" // 后面会介绍
},
]
}
- webpack-parallel-uglify-plugin 插件（优化 js 压缩过程）
webpack-parallel-uglify-plugin 能够把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，从而实现并发编译，进而大幅提升 js 压缩速度
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
// ...
optimization: {
minimizer: [
new ParallelUglifyPlugin({ // 多进程压缩
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false,
beautify: false
},
compress: {
warnings: false,
drop_console: true,
collapse_vars: true,
reduce_vars: true
}
}
}),
]
}
- HappyPack
在 webpack 运行在 node 中打包的时候是单线程去一件一件事情的做，HappyPack 可以开启多个子进程去并发执行，子进程处理完后把结果交给主进程
const HappyPack = require('happypack');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, './dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'happypack/loader?id=babel',
},
]
},
plugins: [
new HappyPack({
id: 'babel', //id值，与loader配置项对应
threads: 4, //配置多少个子进程
loaders: ['babel-loader'] //用什么loader处理
}),
]
}
- DLL 动态链接
第三方库不是经常更新，打包的时候希望分开打包，来提升打包速度。打包 dll 需要新建一个 webpack 配置文件（webpack.dll.config.js），在打包 dll 的时候，webpack 做一个索引，写在 manifest 文件中。然后打包项目文件时只需要读取 manifest 文件。
const webpack = require("webpack");
const path = require('path');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const dllPath = path.resolve(__dirname, "../src/assets/dll"); // dll文件存放的目录
module.exports = {
entry: {
// 把 vue 相关模块的放到一个单独的动态链接库
vue: ["babel-polyfill", "fastclick", "vue", "vue-router", "vuex", "axios", "element-ui"]
},
output: {
filename: "[name]-[hash].dll.js", // 生成vue.dll.js
path: dllPath,
library: "_dll_[name]"
},
plugins: [
new CleanWebpackPlugin(["*.js"], { // 清除之前的dll文件
root: dllPath,
}),
new webpack.DllPlugin({
name: "_dll_[name]",
// manifest.json 描述动态链接库包含了哪些内容
path: path.join(__dirname, "./", "[name].dll.manifest.json")
}),
],
};
接着， 需要在 package.json 中新增 dll 命令。
"scripts": {
"dll": "webpack --mode production --config build/webpack.dll.config.js"
}
运行 npm run dll 后，会生成 ./src/assets/dll/vue.dll-[hash].js 公共 js 和 ./build/vue.dll.manifest.json 资源说明文件，至此 dll 准备工作完成，接下来在 webpack 中引用即可。
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'vuex',
'elemenct-ui': 'ELEMENT',
'axios': 'axios',
'fastclick': 'FastClick'
},
plugins: [
...(config.common.needDll ? [
new webpack.DllReferencePlugin({
manifest: require("./vue.dll.manifest.json")
})
] : [])
]
7 webpack 如何优化前端性能
- 第三方库按需加载、路由懒加载
//第三方ui库element，vant等库都提供来按需加载的方式，避免全部引入，加大项目体积
import { Button, Select } from 'element-ui';
//路由懒加载
const showImage = () => import('@/components/common/showImage');
- 代码分割
- 提取第三方库vendor
module.exports = {
entry: {
main: './src/index.js',
vendor: ['react', 'react-dom'],
},
}
- 依赖库分离splitChunks
optimization: {
splitChunks: {
chunks: "async", // 必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)
minSize: 30000, // 最小尺寸，30000
minChunks: 1, // 最小 chunk ，默认1
maxAsyncRequests: 5, // 最大异步请求数， 默认5
maxInitialRequests : 3, // 最大初始化请求书，默认3
automaticNameDelimiter: '~',// 打包分隔符
name: function(){}, // 打包后的名称，此选项可接收 function
cacheGroups:{ // 这里开始设置缓存的 chunks
priority: 0, // 缓存组优先级
vendor: { // key 为entry中定义的 入口名称
chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async)
test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
name: "vendor", // 要缓存的 分隔出来的 chunk 名称
minSize: 30000,
minChunks: 1,
enforce: true,
maxAsyncRequests: 5, // 最大异步请求数， 默认1
maxInitialRequests : 3, // 最大初始化请求书，默认1
reuseExistingChunk: true // 可设置是否重用该chunk
}
}
}
},
- 删除冗余代码
Tree-Shaking
https://juejin.im/post/5eb502de6fb9a0437c393979
