webpack五个核心概念
Entry
入口(Entry)指示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
output
输出(Output)指示webpack 打包后的资源bundles 输出到哪里去，以及如何命名。
loader
Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript)
plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
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初体验
安装
1
2
3
4
|
npm i webpack webpack-cli -g
npm i webpack webpack-cli -D
|
简单命令
1
2
3
4
|
webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production
|
webpack基础配置结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const { resolve } = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
]
},
plugins: [
],
mode: 'development'
}
|
打包样式资源
打包样式所需要的loader都需要进行安装。例如：
1
| yarn add style-loader css-loader less-loader less -D
|
css
打包css只需要使用css-loader和style-loader即可。
1
2
3
4
5
6
7
8
9
10
11
| {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}
|
less
打包less文件需要安装less-loader和less因为less-loader依赖于less。
1
2
3
4
5
6
7
8
9
10
11
| {
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
}
|
完整配置
打包样式资源的完整配置
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
|
const { resolve } = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
],
mode: 'development'
}
|
打包HTML资源
安装插件
1
| yarn add html-webpack-plugin@next -D
|
webpack配置
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
|
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, '/src/index.html'),
filename: 'index.html'
})
],
mode: 'development'
}
|
webpack5目前无法使用html-webpack-plugin（2020年12月31号，后期可能会支持）。https://github.com/jantimon/html-webpack-plugin
打包图片资源
安装插件，使用只需要使用url-loader即可。
1
| yarn add url-loader file-loader -D
|
处理css文件中的图片引入
1
2
3
4
5
6
7
| {
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024
}
}
|
这种方式有个问题，无法处理html中的图片引入。
处理html中的文件引入
1
2
3
4
5
| {
test: /\.html$/,
loader: 'html-loader'
}
|
完整配置
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
|
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
|
打包其他资源
其他资源包括字体、svg图片等信息。
由于其他资源所指太多，因此无法使用test进行匹配，所以使用exclude进行排除。
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
|
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader'] },
{ exclude: /\.(css|js|html)/, loader: 'file-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
|
devServer
安装包
1
| yarn add webpack-dev-server -D
|
配置
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
|
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader'] },
{ exclude: /\.(css|js|html)/, loader: 'file-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 300,
open: true
}
}
|
只会在内存中打包，不会实际输出。
开发环境基本配置
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
|
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]'
}
},
{
exclude: /\.(jpg|png|gif|html|js|css|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 300,
open: true
}
}
|
