webpack 生产环境基础配置
Galloping_Leo 2020-10-09 webpack
# webpack 生产环境基础配置
# 提取 css 单独文件
style-loader
将项目中的 css 文件打包进入 build.js(打包后的 js)，最后通过 js 在HTML 中引用
mini-css-extract-plugin
用来取代 style-loader ，它将项目中的 css 文件提取出来形成单独的 css 文件，然后再通过 <style /> 标签插入模板文件中 index.html。一个 js 文件引用多个 css 文件，最后会被 打包成一个 css 文件 。
mini-css-extract-plugin 还作为一个插件使用，设置打包后的 css 文件在打包目录下的路径和文件名称。
项目配置：
// webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style标签，将样式放入
// 'style-loader',
// 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名，并输出到 css 目录下
filename: 'css/built.css'
})
],
mode: 'development'
}
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
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
# css 兼容性处理
# postcss-loader
postcss-loader应该是 Webpack 配置中不可或缺的一个 css loader。它负责进一步处理 css 文件，比如添加浏览器前缀，压缩 css 等
# postcss-preset-env
先再 package.json 中配置 browserslist 属性，用于配置项获取要兼容的浏览器版本。配置项通过获取以下信息来为 css 做兼容处理。
// package.json
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
在通过 postcss-preset-env 做 css 兼容（添加 css 前缀），配置如下：
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/build.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
//配置 postcss-loader
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
//postcss的插件
require('postcss-preset-env')(/*optoins*/),
]
}
}
}
]
}
]
},
mode: 'development',
plugins: [
new MiniCssExtractPlugin({
//对输出的文件 重命名
filename: 'css/build.css'
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
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
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
也可以不用在 package.js 配置，直接在 webpack.config.js 文件中配置。
{
//配置 postcss-loader
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
//postcss的插件
[
"postcss-preset-env",
{
browsers: 'last 2 version'
}
]
]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 压缩 css
# optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 把项目中的 css 压缩处理。配置：
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/build.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
}
]
},
mode: 'development',
plugins: [
new MiniCssExtractPlugin({
filename: 'css/build.css'
}),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
//压缩 css 插件使用
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
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
# js 语法检查
首先需要安装语法检测的包
yarn add eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
1
eslint-config-airbnb-base 是 Airbnb 的 js 语法检测规则。
注意
只检查自己写的源代码，第三方的库是不用检查的
首先在 package.json 设置检查规则
//package.json中eslintConfig中设置~
"eslintConfig": {
"extends": "airbnb-base"
}
1
2
3
4
2
3
4
参数 fix : boolean 设置是否自动修改格式错误的代码。
完整配置
// webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
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
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
在 js 中可以使用注释来取消检查某一行代码
// 下一行eslint所有规则都失效（下一行不进行eslint检查）
// eslint-disable-next-line
console.log(add(2, 5));
1
2
3
2
3
# js 兼容处理
@babel/polyfill
能够解决所有的 js 兼容问题，使用时把所有处理兼容性的代码在入口 js 中引入，造成代码体积过大，得不偿失。
@babel/preset-env
只能处理 js 的基本语法的兼容性，如 promise 高级语法不能处理。
以上两种方式不方便，所以最后使用 core-js 按需加载兼容性的代码来处理js的兼容问题。
js 兼容性处理需要安装
yarn add babel-loader @babel/core @babel/preset-env core-js
1
使用 exclude 排除 node_modules 文件夹，传入参数：
useBuiltIns 设置为 'usage' 用来按需加载
corejs 设置 core-js 的版本
targets 指定兼容性做到哪个版本浏览器
配置文件
// webpack.config.js
// ...
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
}
// ...
// ...
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
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
# js 压缩
把 js 中的 mode 修改为 production 后，webpack 会使用自带的模块将 js 压缩。
// webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
// 生产环境下会自动压缩js代码
mode: 'production'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# html 压缩
使用 html-webpack-plugin 来压缩 html 代码。配置html-webpack-plugin 插件的 minify 属性。
配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode: 'production'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 生产环境基础配置
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
process.env.NODE_ENV = 'production'
const commCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
//还需要在packag,json中指定 browserslist
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
//postcss的插件
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
]
}
}
}
]
module.exports = {
entry: './index.js',
output: {
filename: 'js/build.js',
path: resolve(__dirname, 'build')
}
mode: 'production', //压缩js
module: {
rules: [
// 对于js 来说先执行 eslint 在 通过babel转换代码
{ //eslint 代码检查 还需要在 package.json中配置 eslintConfig 配置项
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforece: 'pre',//优先执行
optinos: {
fix: true
}
},
{
test: /\.js$/, //处理 js 的兼容性问题
exclude: /node_modules/,
loader: 'babel-loader',
options: {
preset: [
'@babel/preset-env', //简单语法处理
//按需加载 js 的兼容处理 代码
{
//按需加载 js 的兼容处理 代码
useBuiltIns: 'usage',
//指定 core-js 版本
corejs: {
version: 3
},
//兼容到的 浏览器版本
traget: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17',
}
}
]
}
},
{
test: /\.css$/,
use: commCssLoader
},
{
test: /\.less$/,
use: [...commCssLoader, 'less-loader',]
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader', //es6
options: {
limit: 8 * 1024,
esModule: false,
name: '[hash:10].[ext]',
outputPath: 'img'
}
},
{
//负责将html中的图片引入 使得可以被url-loader 处理
test: /\.html$/,
laoder: 'html-loader'
},
{
exclude: /\.(css|html|js|png|jpg|gif|less)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
media: 'img'
}
}
]
},
plugins: [
//压缩 html 将项目中的 index.html 拷贝到打包文件夹中
new HtmlWebpackPlugin({
template: './public/index.html',
//压缩 html
minify: {
//去掉空格
collapseWhitespace: true,
//去掉注释
removeComments: true
}
}),
new MiniCssExtractPlugin({
//配置打包后 css 的文件名称
filename: 'css/built.css'
}),
//压缩 css
new OptimizeCssAssetsWebpackPlugin()
]
}
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
