Appearance
目录结构
├── config
│ ├── webpack.base.js
│ ├── webpack.dev.js
│ └── webpack.prod.js
├── public
│ ├── index.html
│ └── favicon.ico
├── src
│ └── index.js
└── package.json
通过 merge 合并配置项 webpack 打包配置文件
- webpack.config.js 通用配置文件
- webpack.dev.js 开发使用的配置文件
- webpack.prod.js 打包上线使用的配置文件
安装
cnpm install
webpack webpack-cli webpack-dev-server
html-webpack-plugin clean-webpack-plugin
babel-loader @babel/core @babel/preset-env
style-loader css-loader sass-loader node-sass mini-css-extract-plugin optimize-css-assets-webpack-plugin postcss-loader
vue-loader vue-template-compiler //vue2.x ; vue3.x : @vue/compiler-sfc
file-loader url-loader
eslint eslint-loader babel-eslint
html-loader
-D
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-laoder需要配合VueLoaderPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //在每次构建前清理构建文件夹 dist
const resolve = (pathname) => path.resolve(__dirname, pathname);
module.exports = {
entry: '../src/index.js',
output: {
path: resolve('../dist'),
filename: '[name]_[chunkhash:5].js'
},
resolve: {
alias: {
'@': resolve('../src')
},
//配置了extensions就可以不用写文件后缀
//当找不到模块时, 优先查找.js文件,没有在查找.vue模块
//如果不合理配置,就会影响到打包速度,配置过多就会导致扫描多次数增加,进而影响打包速度。
extensions: ['.js', '.json', '.vue', 'scss'],
modules: [resolve('../node_modules')]
},
plugins: [
new HtmlWebpackPlugin({
template: '../src/public/index.html', //指定模板文件
filename: 'index.html', //模板文件的名称
title: 'html title信息内容,可配合htmlWebpackPlugin.options.title使用',
hash: true, //根据文件生成hash码 防止浏览器缓存文件
minify: {
//压缩html
removeAttributeQuotes: true, //去除属性的双引号
collapseWhitespace: true, //去除空格、换行
collapseBooleanAttributes: true,
removeComments: true // 去掉注释
}
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*']
}),
new VueLoaderPlugin() //和vue-loader配合使用
],
module: {
rules: [
{
test: /\.jsx?$/i,
loader: 'eslint-loader',
enforce: 'pre', //区分loader,默认normal
options: {
fix: true
},
exclude: /node_modules/
},
{
test: /\.jsx?$/,
//exclude的优先级比include的高
exclude: /node_modules/,
include: path.resolve(__dirname, '../src'),
use: {
loader: 'babel-loader', //处理es6语法
options: {
//ES5语法很多,避免写多个插件,配置预设
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage' //无需手工引入@babel/polyfill,按需多次局部引入
// 'entry' 需手工引入一次@babglobalel/polyfill,挂载到上,污染全局变量
// false 全量引入@babel/polyfill 默认值
}
],
{
targets: { chrome: '67' },
useBuiltIns: 'usage'
}
]
}
}
},
// 用file-loader url-loader来处理图片 url-loader依赖file-loader
// base64编码小图片(大图片不适合base64编码,会使图片变大原来的1/3)
// name 输出的文件名,打包文件名
// publicPath 打包的公共路径(ps:默认是在output.path下面)
// outputPath 表示输出文件路径前缀,打包的文件放在img文件夹内。
// 比如默认打包出来是在 dist/1.img。设置outputPath就是dist/img/1.jpg
//其中limit 属性可以指定需要被base64编码的图片,单位为byte,
// 此例中表示大小不大于10kb的图片将会被base64编码,并返回一个DataURL
//当你图片大小小于这个限制的时候,会自动启用base64编码图片
// # 路径:build / webpack.base.conf.js
// # url - loader加载器定义
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024 * 10, //设为0表示不用base64编码图片
name: 'img/[name].[ext]',
//outputPath和publicPath一起使用;或者name配置'/images/[name].[ext]'
outputPath: 'images', //指定输出目录 /dist/img
//解决css中的背景图片路径问题
// "/"是url地址的根路径
publicPath: '/images',
//关闭url-loader默认的es6模块化
//(因为解析时出现[object Module]问题),使用commonJs解析
esModule: false //是否包装成ES5模块
}
},
//处理html中的img标签引入图片 使用commonJs规范
{
test: /\.html$/i,
loader: 'html-loader'
},
{
//处理字体
test: /\.(woff2?|svg|eot|ttf|otf)$/i,
include: [path.resolve(__dirname, '../src/')],
loader: 'url-loader'
},
{
test: /\.vue$/i,
use: 'vue-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
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
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