vue.config.js
4.16 KB
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
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const TimeStamp = new Date().getTime();
module.exports = {
publicPath: "./", // 编译后的地址,可以根据环境进行设置
outputDir: "dist", // 生产环境构建文件的目录
assetsDir: "static", // 静态文件目录
lintOnSave: false, //是否开启编译时是否不符合eslint提示
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer: {
hot: true,
port: 8081, // 端口
open: false, // 启动后打开浏览器
compress: true,
overlay: {
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: true,
},
proxy: {
"/": {
// target:"http://ezquiz.sunvotecloud.cn",
// target:"http://192.168.1.151:8089",
// target: "https://ezquiz.sunvotecloud.cn",
target: "http://121.40.127.171:8090",
// target:"http://127.0.0.1:8089",
changeOrigin: true,
ws: true,
},
},
disableHostCheck: true,
},
// configureWebpack: {
// devtool: 'source-map',
// output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
// filename: `js/[name]${TimeStamp}.js`,
// chunkFilename: `js/[name]${TimeStamp}.js`
// },
// },
css: {
extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sourceMap: false,
// extract: {
// // 修改打包后css文件名 // css打包文件,添加时间戳
// filename: `css/[name]${TimeStamp}.css`,
// chunkFilename: `css/[name]${TimeStamp}.css`
// }
},
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].title = "云平台";
return args;
});
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("router", resolve("src/router"))
.set("utils", resolve("src/utils"))
.set("store", resolve("src/store"))
.set("views", resolve("src/views"))
.set("config", resolve("src/config"))
.set("api", resolve("src/api"));
if (IS_PROD) {
config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
{
analyzerMode: "static",
},
]);
}
config.when(IS_PROD, (config) => {
config.devtool("cheap-source-map");
config
.plugin("ScriptExtHtmlWebpackPlugin")
.after("html")
.use("script-ext-html-webpack-plugin")
.end();
config.optimization.splitChunks({
chunks: "all",
cacheGroups: {
// cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块
commons: {
name: "chunk-commons",
test: resolve("src/components"),
minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级
reuseExistingChunk: true, // 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
},
node_vendors: {
name: "chunk-libs",
chunks: "initial", // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10,
},
elementUI: {
name: "chunk-elementUI", // 单独将 elementUI 拆包
priority: 20, // 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?element(.*)/,
},
},
});
config.optimization.runtimeChunk("single");
config.optimization.minimize(true);
});
},
};