初识 webpack (三)
205 / 2 / 创建于 4年前 /
ouer1994 的个人博客
初识 webpack (三)
webpack 4
1. 自动清空构建目录
# webpack.config.js 中
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
# webpack.config.js [plugins 中]
new CleanWebpackPlugin(),2. 补齐 css3 前缀
browlist: https://browserl.ist/
Github: https://github.com/browserslist/browsersli...
npm i -D postcss-loader autoprefixer
# webpack.config.js [module.rules 中]
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 2 version', '>1%']
}),
]
}
},
'less-loader',
]
},3. px 转换为 rem
npm i -D px2rem-loader
# css
.search-text {
font-size: 20px;
color: red;
display: flex;
border-radius: 4px; /*no*/
}
/*no*/ 表示不进行转换
# webpack.config.js [module.rules 中]
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')(),
]
}
},
{
loader: 'px2rem-loader',
options: {
// 1rem = 75px
remUnit: 75,
// 精度
remPrecision: 8
}
},
'less-loader'
]
},4. 静态资源内联
代码层⾯
- ⻚⾯框架的初始化脚本
- 上报相关打点
- css 内联避免⻚⾯闪动
请求层⾯：减少 HTTP ⽹络请
- ⼩图⽚或者字体内联 (url-loader)
npm i -D raw-loader@0.5.1
# 手淘的 自动计算 font-size 脚本
npm i lib-flexible4.1 HTML, JS 内联
使用 raw-loader
... <head> ${ require('raw-loader!./meta.html') } <title>Document</title> <script>${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js') }</script> </head> ...4.2 css 内联
- style-loader
- html-inline-css-webpack-plugin
5. sourcemap
| sourcemap 关键字 | 说明 |
|---|---|
| eval | 使⽤ eval 包裹模块代码 |
| source map | 产⽣ .map ⽂件 |
| cheap | 不包含列信息 |
| inline | 将 .map 作为 DataURI 嵌⼊，不产⽣ .map ⽂件 |
| module | 包含 loader 的 sourcemap |
# webpack.config.js 中
devtool: 'source-map'6. 提取公共库
6.1 使用 html-webpack-externals-plugin 插件提取
将公共库(比如 jquery) 从 bundle.js 中提取出来.
文档: https://www.npmjs.com/package/html-webpack...
npm i -D html-webpack-externals-plugin
# webpack.config.js 中
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
# webpack.config.js [plugins 中, **放在 HtmlWebpackPlugin 实例之后**]
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'jquery',
entry: 'dist/jquery.min.js',
global: 'jQuery',
},
],
}),6.2 使用 SplitChunksPlugin(webpack 4内置) 插件提取
# webpack.config.js 中
optimization: {
splitChunks: {
cacheGroups: {
jqueryA: {
chunks: "all",
test: /jquery/,
name: "jquery",
},
}
}
},
# 引入到 html 文件中, 需要在 html-webpack-plugin 的实例配置 chunks 中加上 jquery
chunks:
async 异步引⼊的库进⾏分离(默认)
initial 同步引⼊的库进⾏分离
all 所有引⼊的库进⾏分离(推荐)6.3 提取公共资源
# webpack.config.js 中
optimization: {
splitChunks: {
cacheGroups: {
...
commons: {
chunks: "all",
name: "commons",
minChunks: 2,
minSize: 0
}
}
}
},
minChunks: 最少引用次数, >= 这个次数才会提取出来
minSize: 提取出来的文件的最小size. 如果小于设定的值是不会提取的7. Tree Shaking (webpack4 mode: production的情况下, 默认开启)
通俗的解释: 用到的方法打包, 用不到的方法不打包(去掉)
那么这个 用到的 又如何理解呢?
- 代码不会被执行, 不可到达
- 代码的执行结果不会被用到
- 代码只会影响死变量(只写不读)
如果代码有副作用, Tree Shaking 会失效.
副作用这个概念来源于函数式编程(FP)，纯函数是没有副作用的，也不依赖外界环境或者改变外界环境。纯函数的概念是：接受相同的输入，任何情况下输出都是一样的。
非纯函数存在副作用，副作用就是：相同的输入，输出不一定相同。或者这个函数会影响到外部变量、外部环境。
函数如果调用了全局对象或者改变函数外部变量，则说明这个函数有副作用.必须是 es6 语法, commonJs 不支持
8. Scope Hoisting (webpack4 mode: production的情况下, 默认开启)
原理: 将所有模块的代码按照引用顺序放在一个函数作用域里, 适当的重命名一些变量以防止命名冲突.
简单的理解就是: 减少了闭包数量, 从而减少了内存消耗. 但是对于引用次数 >1 的模块是无法进行此项优化的.
9. 动态 import
import('').then();10. eslint
eslint-config-alloy: https://github.com/AlloyTeam/eslint-config...
eslint-config-airbnb: https://github.com/airbnb/javascript/tree/...
eslint rules: http://eslint.cn/docs/rules/
11. 优化构建时日志显示
# webpack.config.js 中
stats: 'minimal'
# 更有好的显示构建结果
npm i -D friendly-errors-webpack-plugin
# webpack.config.js 中
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
# webpack.config.js [plugins 中]
new FriendlyErrorsWebpackPlugin()本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
我想知道这些知识的获取途径，可以分享下吗？ :heart: :kissing_heart:
@cnguu 极客时间 + 文档