generated from yeyan1996/vue2-admin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vue.config.js
140 lines (136 loc) · 4.18 KB
/
vue.config.js
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
const fs = require("fs");
const path = require("path");
const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin"); // 给 index.html 注入 dll 生成的链接库
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const { DllReferencePlugin } = require("webpack");
const {
DLL_DIR,
IS_PRODUCTION,
IS_TEST,
USE_CDN
} = require("./webpack.config");
// 由于公有 cdn 不稳定,这里提供 cdn 的配置项但是用 DllPlugin 做替代
const cdn = [
"https://unpkg.com/vue@2.6.9/dist/vue.min.js",
"https://unpkg.com/vue-router@3.0.2/dist/vue-router.min.js",
"https://unpkg.com/vuex@3.1.0/dist/vuex.min.js",
"https://unpkg.com/element-ui@2.6.1/lib/index.js",
"https://unpkg.com/axios@0.18.0/dist/axios.min.js",
"https://unpkg.com/js-cookie@2.2.0/src/js.cookie.js"
];
const externals = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
"element-ui": "ELEMENT",
axios: "axios",
"js-cookie": "Cookies"
};
const plugins = [];
// 通过 readdirSync 分析 .dll 目录读取文件名
// 动态注册 AddAssetHtmlWebpackPlugin 和 webpack.DllReferencePlugin
if (IS_PRODUCTION && fs.existsSync(DLL_DIR)) {
fs.readdirSync(DLL_DIR).forEach(file => {
if (/.*\.dll\.js$/.test(file)) {
plugins.push(
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, DLL_DIR, file),
outputPath: "js", // 输出路径,相对于默认的输出路径(dist)
publicPath: "js" // 引入文件路径
})
);
}
if (/.*\.manifest.json/.test(file)) {
plugins.push(
new DllReferencePlugin({
manifest: path.resolve(__dirname, DLL_DIR, file)
})
);
}
});
}
module.exports = {
publicPath: "",
chainWebpack: config => {
/**
* 删除懒加载模块的 prefetch preload,降低带宽压力(使用在移动端)
*/
// config.plugins.delete("prefetch").delete("preload");
config.resolve.alias
.set("@", path.join(__dirname, "src/"))
.set("util", path.join(__dirname, "src/util"))
.set("mixins", path.join(__dirname, "src/mixins"));
config.module.rule("svg").uses.clear();
config.module
.rule("svg")
.test(/\.svg$/)
.include.add(path.join(__dirname, "src/icons")) //处理svg目录
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
// 修改images loader 添加svg处理
config.module
.rule("images")
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
.exclude.add(path.join(__dirname, "src/icons"))
.end();
if (IS_PRODUCTION) {
if (USE_CDN) {
config.plugin("html").tap(args => {
args[0].cdn = cdn;
return args;
});
config.externals(externals);
}
config.plugin("html").tap(args => {
args[0].minify.minifyCSS = true; //压缩 index.html 中的css
return args;
});
/** 注意:gzip需要nginx进行配合 */
config
.plugin("compression")
.use(CompressionWebpackPlugin)
.tap(() => [
{
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //超过10k进行压缩
deleteOriginalAssets: false //是否删除源文件
}
]);
config.optimization.minimizer("terser").tap(args => {
// 生产环境推荐关闭 sourcemap 防止源码泄漏
// 服务端通过前端发送的行列,根据 sourcemap 转为源文件位置
args[0].sourceMap = IS_TEST;
args[0].terserOptions.warnings = false;
args[0].terserOptions.compress.drop_console = true;
args[0].terserOptions.compress.drop_debugger = true;
return args;
});
}
},
configureWebpack: {
plugins
},
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
prependData: `
@import '~@/style/mixin.scss';
@import "~@/style/variables.scss";
`
}
}
},
devServer: {
host: "0.0.0.0",
overlay: true,
port: 8088
}
};