Skip to content

Commit 74f3e70

Browse files
start626-liangstart626-liang
committed
1.更新配置
2.升级为webapck5
1 parent ee46020 commit 74f3e70

7 files changed

+10176
-149
lines changed

‎.gitignore

-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
node_modules/
2-
pnpm-lock.yaml
3-
pnpm-lock.1.yaml
4-
package-lock.json
52

63
dist/

‎config/webpack.base.config.js

+42-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
const path = require('path')
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3+
4+
const isDev = process.env.NODE_ENV === 'development'
25

36
const resolve = dir => path.join(__dirname, '..', dir)
47
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html模板
@@ -10,9 +13,39 @@ module.exports = {
1013
{
1114
test: /\.js$/,
1215
include: resolve('src'), // 只解析src下面的文件,不推荐用exclude
13-
use: {
14-
loader: 'babel-loader'
15-
}
16+
use: [
17+
{
18+
loader: "thread-loader",
19+
options: {
20+
// 产生的 worker 的数量，默认是 cpu 的核心数
21+
workers: 4,
22+
// 一个 worker 进程中并行执行工作的数量,默认为20
23+
workerParallelJobs: 50,
24+
// Allow to respawn a dead worker pool
25+
// respawning slows down the entire compilation
26+
// and should be set to false for development
27+
poolRespawn: false,
28+
// 闲置时定时删除 worker 进程
29+
// 默认为 500ms
30+
// 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
31+
poolTimeout: 2000,
32+
// 池(pool)分配给 worker 的工作数量
33+
// 默认为 200
34+
// 降低这个数值会降低总体的效率，但是会提升工作分布更均一
35+
poolParallelJobs: 50,
36+
// 池(pool)的名称
37+
// 可以修改名称来创建其余选项都一样的池(pool)
38+
name: "my-pool"
39+
}
40+
},
41+
{
42+
loader: isDev ? 'eslint-loader' : 'babel-loader',
43+
options: isDev ? {
44+
fix: true
45+
// eslint options (if necessary)
46+
} : {}
47+
}
48+
]
1649
},
1750
{
1851
test: /\.(png|jpg|gif|ttf)$/,
@@ -34,9 +67,11 @@ module.exports = {
3467
}
3568
},
3669
plugins: [
37-
new HtmlWebpackPlugin({
38-
filename: resolve('/dist/index.html'), // 生成的html文件存放的地址和文件名
39-
template: resolve('/index.html') // 基于index.html模板进行生成html文件
40-
})
70+
new HtmlWebpackPlugin(
71+
{
72+
// https://github.com/jantimon/html-webpack-plugin#minification
73+
// filename: resolve('/dist/index.html'), // 生成的html文件存放的地址和文件名
74+
template: resolve('/public/index.html'),// 基于index.html模板进行生成html文件
75+
})
4176
]
4277
}

‎config/webpack.dev.config.js

+8-37
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const commonConfig = require('./webpack.base.config.js')
22
const path = require('path')
3-
const merge = require('webpack-merge')
3+
const { merge } = require('webpack-merge')
44
const webpack = require('webpack')
55

66
const resolve = dir => path.join(__dirname, '..', dir)
@@ -10,23 +10,13 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
1010

1111
module.exports = merge(commonConfig, {
1212
mode: 'development', // webpack4新增属性，默认返回production,提供一些默认配置，例如cache:true
13-
devtool: 'cheap-module-eval-source-map',
1413
// source-map每个module生成对应的map文件
1514
// eval 每一个module模块执行eval，不生成map文件，在尾部生成一个sourceURL对应前后关系，所以更快
1615
// cheap 列信息 VLQ编码
1716
// module 包含了模块之间的sourcemap
1817
module: {
1918
// 配置loader
2019
rules: [
21-
{
22-
test: /\.js$/,
23-
include: resolve('src'),
24-
loader: 'eslint-loader',
25-
options: {
26-
fix: true
27-
// eslint options (if necessary)
28-
}
29-
},
3020
{
3121
test: /\.css$/,
3222
include: resolve('src'),
@@ -42,25 +32,6 @@ module.exports = merge(commonConfig, {
4232
'postcss-loader'
4333
]
4434
},
45-
{
46-
test: /\.less$/,
47-
// include: resolve('src'),
48-
use: [
49-
'style-loader', // 将 JS 字符串生成为 style 节点
50-
{
51-
loader: 'css-loader',
52-
options: {
53-
odules: {
54-
localIdentName:
55-
'FILE-[name]__ELEMENT_NAME-[local]__HASH64-[hash:base64:5]'
56-
}
57-
}
58-
}, // 将 CSS 转化成 CommonJS 模块
59-
'postcss-loader',
60-
'less-loader' // 将 Less 编译为 CSS
61-
]
62-
},
63-
6435
{
6536
test: /\.scss$/,
6637
use: [
@@ -97,13 +68,13 @@ module.exports = merge(commonConfig, {
9768
proxy: {
9869
// 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
9970
// 你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
100-
'/lottery': {
101-
ws: false,
102-
target: 'https://event.dev.xsteach.com',
103-
// target: '',
104-
secure: false,
105-
changeOrigin: true
106-
}
71+
// '/lottery': {
72+
// ws: false,
73+
// target: 'https://event.dev.xsteach.com',
74+
// // target: '',
75+
// secure: false,
76+
// changeOrigin: true
77+
// }
10778
}
10879
},
10980
plugins: [

‎config/webpack.prod.config.js

+50-57
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const commonConfig = require('./webpack.base.config.js')
22
const resolve = dir => path.join(__dirname, '..', dir)
33
const path = require('path')
4-
const merge = require('webpack-merge')
4+
const { merge } = require('webpack-merge')
55
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
66
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
77

@@ -35,34 +35,6 @@ module.exports = merge(commonConfig, {
3535
'postcss-loader'
3636
]
3737
},
38-
{
39-
test: /\.less$/,
40-
// include: resolve('src'),
41-
use: [
42-
{
43-
loader: MiniCssExtractPlugin.loader,
44-
options: {
45-
publicPath: (resourcePath, context) => {
46-
// publicPath is the relative path of the resource to the context
47-
// e.g. for ./css/admin/main.css the publicPath will be ../../
48-
// while for ./css/main.css the publicPath will be ../
49-
return path.relative(path.dirname(resourcePath), context) + '/'
50-
}
51-
}
52-
},
53-
{
54-
loader: 'css-loader',
55-
options: {
56-
odules: {
57-
localIdentName: '[local]--[hash:base64]'
58-
}
59-
}
60-
}, // 将 CSS 转化成 CommonJS 模块
61-
'postcss-loader',
62-
'less-loader' // 将 Less 编译为 CSS
63-
]
64-
},
65-
6638
{
6739
test: /\.scss$/,
6840
use: [
@@ -100,36 +72,57 @@ module.exports = merge(commonConfig, {
10072
filename: '[name][hash].js', // 生成的js文件的名字
10173
path: path.resolve(__dirname, '..', 'dist/708') // 生成的js存放目录
10274
},
103-
// optimization: {
104-
// splitChunks: {
105-
// chunks: "all", //可填 async, initial, all. 顾名思义，async针对异步加载的chunk做切割
106-
// minSize: 30000, //我们切割完要生成的新chunk要>30kb，否则不生成新chunk。
107-
// minChunks: 2, //共享该module的最小chunk数
108-
// maxAsyncRequests: 5, //最多有5个异步加载请求该module
109-
// maxInitialRequests: 3, //初始化的时候最多有3个请求该module
110-
// automaticNameDelimiter: '~', //名字中间的间隔符
111-
// name: true, //chunk的名字，如果设成true，会根据被提取的chunk自动生成。
112-
// cacheGroups: { //要切割成的每一个新chunk就是一个cache group。
113-
// vendors: {
114-
// test: /[\\/]node_modules[\\/]/, //和CommonsChunkPlugin里的minChunks非常像，用来决定提取哪些module，可以接受字符串，正则表达式，或者函数，函数的一个参数为module，第二个参数为引用这个module的chunk(数组).
115-
// priority: -10
116-
// },
117-
// default: {
118-
// minChunks: 2,
119-
// priority: -20, //优先级高的chunk为被优先选择(说出来感觉好蠢),优先级一样的话，size大的优先被选择
120-
// reuseExistingChunk: true //当module未变时，是否可以使用之前的chunk.
121-
// }
122-
// }
123-
// }
124-
// },
75+
optimization: {
76+
minimize: true,
77+
// 告诉webpack使用TerserPlugin最小化捆绑包
78+
minimizer: [
79+
new TerserPlugin({
80+
parallel: 4,
81+
sourceMap: false,
82+
}),
83+
new OptimizeCSSAssetsPlugin({})
84+
],
85+
//抽取公共的dm
86+
splitChunks: {
87+
name: "commons",//chunk的名字，如果设成true，会根据被提取的chunk自动生成。
88+
chunks: 'all',//可填 async, initial, all. 顾名思义，async针对异步加载的chunk做切割
89+
minSize: 30000, //我们切割完要生成的新chunk要>30kb，否则不生成新chunk。
90+
// minChunks: 2, //共享该module的最小chunk数
91+
// maxAsyncRequests: 5, //最多有5个异步加载请求该module
92+
// maxInitialRequests: 3, //初始化的时候最多有3个请求该module
93+
// automaticNameDelimiter: '~', //名字中间的间隔符
94+
cacheGroups: {//要切割成的每一个新chunk就是一个cache group。
95+
styles: {
96+
name: 'styles',
97+
test: /\.css$/,
98+
chunks: 'all',
99+
enforce: true,
100+
},
101+
// vendors: {
102+
// test: /[\\/]node_modules[\\/]/, //和CommonsChunkPlugin里的minChunks非常像，用来决定提取哪些module，可以接受字符串，正则表达式，或者函数，函数的一个参数为module，第二个参数为引用这个module的chunk(数组).
103+
// priority: -10
104+
// },
105+
// default: {
106+
// minChunks: 2,
107+
// priority: -20, //优先级高的chunk为被优先选择(说出来感觉好蠢),优先级一样的话，size大的优先被选择
108+
// reuseExistingChunk: true //当module未变时，是否可以使用之前的chunk.
109+
// }
110+
},
111+
},
112+
},
125113
plugins: [
114+
new webpack.HashedModuleIdsPlugin(),
126115
new CleanWebpackPlugin(),
127116
new MiniCssExtractPlugin({
128-
// Options similar to the same options in webpackOptions.output
129-
// all options are optional
130-
filename: '[name].css',
131-
chunkFilename: '[id].css',
132-
ignoreOrder: false // Enable to remove warnings about conflicting order
133-
})
117+
filename: 'asset/css/[name].[hash].css',
118+
chunkFilename: 'asset/css/[id].[chunkhash].css',
119+
}),
120+
// new MiniCssExtractPlugin({
121+
// // Options similar to the same options in webpackOptions.output
122+
// // all options are optional
123+
// filename: '[name].css',
124+
// chunkFilename: '[id].css',
125+
// ignoreOrder: false // Enable to remove warnings about conflicting order
126+
// })
134127
]
135128
})

0 commit comments

Comments
 (0)