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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
| const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const CleanWebpackPlugin = require('clean-webpack-plugin')
const PurifyCSS = require('purifycss-webpack')
const glob = require('glob-all')
const WorkboxPlugin = require('workbox-webpack-plugin') // 引入 PWA 插件
const path = require('path')
const productiOnConfig= require('./webpack.prod.conf.js') // 引入生产环境配置文件
const developmentCOnfig= require('./webpack.dev.conf.js') // 引入开发环境配置文件
/**
* 根据不同的环境，生成不同的配置
* @param {String} env "development" or "production"
*/
const generateCOnfig= env => {
// 将需要的 Loader 和 Plugin 单独声明
let scriptLoader = [
{
loader: 'babel-loader'
}
]
let cssLoader = [
'style-loader',
'css-loader',
'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
let cssExtractLoader = [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
let fOntLoader= [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
publicPath: 'fonts/',
outputPath: 'fonts/'
}
}
]
let imageLoader = [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 10000, // size <= 10KB
outputPath: '/img/'
}
},
// 图片压缩
{
loader: 'image-webpack-loader',
options: {
// 压缩 jpg/jpeg 图片
mozjpeg: {
progressive: true,
quality: 50 // 压缩率
},
// 压缩 png 图片
pngquant: {
quality: '65-90',
speed: 4
}
}
}
]
let styleLoader =
env === 'production'
? cssExtractLoader // 生产环境下压缩 css 代码
: cssLoader // 开发环境：页内样式嵌入
return {
entry: {
index: './src/js/index.js',
// comany: './src/js/company.js',
},
output: {
publicPath: env === 'development' ? '/' : '../',
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
resolve: {
alias: {
jquery: path.resolve(__dirname, '..', './static/lib/jquery-3.3.1.min.js'),
vue: path.resolve(__dirname, '..', 'static/lib/vue.min.js'),
vuex: path.resolve(__dirname, '..', 'static/lib/vuex.js'),
// vue_router: path.resolve(__dirname, '..', 'static/lib/vue-router.js')
}
},
module: {
rules: [
{ test: /\.js$/, exclude: /(node_modules)/, use: scriptLoader },
{
test: /\.(sa|sc|c)ss$/,
use: styleLoader
},
{
test: /\.html$/,
use: { loader: 'html-loader' }
},
{ test: /\.(eot|woff2?|ttf|svg)$/, use: fontLoader },
{ test: /\.(png|jpg|jpeg|gif)$/, use: imageLoader }
]
},
plugins: [
// 开发环境和生产环境二者均需要的插件
new HtmlWebpackPlugin({
// title: 'webpack4 实战',
filename: './html/index.html',
template: './src/html/index.html',
chunks: ['index'],
minify: {
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
}
}),
// new MiniCssExtractPlugin({
// filename: 'css/[name].css',
// chunkFilename: '[name].min.css'
// }),
// new OptimizeCssAssetsPlugin({
// assetNameRegExp: /\.css$/g,
// cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS 处理器，默认为 cssnano
// cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{}
// canPrint: true //布尔值，指示插件是否可以将消息打印到控制台，默认为 true
// }),
new webpack.ProvidePlugin({
$: 'jquery',
Vue: 'vue',
Vuex: 'vuex',
// Vue
}),
new CleanWebpackPlugin(),
// 清除无用css
new PurifyCSS({
paths: glob.sync([
// 要做css Tree Shaking 的路径文件
path.resolve(__dirname, './*.html'),
path.resolve(__dirname, './src/*.js')
])
}),
// 配置 PWA
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
]
}
}
module.exports = env => {
let cOnfig= env === 'production' ? productionConfig : developmentConfig
return merge(generateConfig(env), config) // 合并 公共配置 和 环境配置
} |
京公网安备 11010802041100号