webpack考点梳理
# 基本使用
# 高级特性
css
开发环境下 style-loader
生产环境
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = smart(webpackCommonConf, {
mode: 'production',
module: {
rules: [
...
// 抽离 css
{
test: /\.css$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'postcss-loader'
]
},
// 抽离 less
{
test: /\.less$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
},
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({})],
...
}
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
46
47
48
49
50
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
46
47
48
49
50
# webpack5 和webpack4 差异
package. j son 的 dey-server 命令改了〝"dev":"webpack serve --config build/ webpack. dev.js",
- 升级新版本
const { merge } = require( 'webpack-merge")
- 升级新版本
const { CleanwebpackPlugin } = require( 'clean-webpack-p Lugin")
module. rules
中Loader: ['xxx-loader ']
换成use: [ 'xxx-loader']
filename:/bundle. [contenthash:8].js"
其中h小写,不能大写
题目
# 前端为何要进行打包和构建?
体积更小(Tree-Shaking、压缩、合并),加载更快
编译高级语言或语法(TS,ES6+,模块化,Scss
兼容性和错误检查(Polyfil, postcss、 eslint)
统一、高效的开发环境
统一的构建流程和产出标准
集成公司构建规范(提测、上线等)
# loader 和 plugin 的区别
- loader 模块转换器,如 less -> css
- plugin 扩展插件,如 HtmlWebpackPlugin
# 常见 loader 和 plugin 有哪些
# babel 和 webpack 的区别
- babel -JS 新语法编译工具,不关心模块化
- webpack一打包构建工具,是多个 loader plugin 的集合
# babel-polyfill 和 babel-runtime 的区别
- babel-polyfill 会污染全局
- babel-runtime 不会污染全局
- 产出第三方 li 要用 babel-runtime
# webpack 如何实现懒加载
import()
- 结合 Vue React 异步组件
- 结合 Vue-router React-router 异步加载路由
# webpack 优化构建速度(可用于生产环境)
- l-loader
- happyPack
- IgnorePlugin
- ParallelUglifyPlugin
- noParse
上次更新: 2023/09/17, 16:36:29