直接上代码:
// const proxy = require("http-proxy-middleware");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const cdn = {
// 忽略打包的第三方库
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
"element-ui": "ELEMENT",
"vue-i18n": "VueI18n",
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
// xlsx: "XLSX"
},
// 通过cdn方式使用
js: [
"https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js",
"https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js",
"https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js",
"https://cdn.bootcss.com/axios/0.19.2/axios.min.js",
// jquery
"https://cdn.bootcss.com/jquery/3.3.1/jquery.js",
// element-ui js
"https://cdn.bootcss.com/element-ui/2.13.0/index.js",
//
"https://cdn.bootcss.com/vue-i18n/8.15.0/vue-i18n.min.js"
//
// "https://cdn.bootcdn.net/ajax/libs/xlsx/0.14.5/xlsx.min.js"
],
css: [
"https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css",
"https://at.alicdn.com/t/font_2377146_umrv82fddxb.css"
]
};
module.exports = {
lintOnSave: false, // 关闭eslint
publicPath: "./",
chainWebpack: config => {
// 配置cdn引入
config.plugin("html").tap(args => {
args[0].cdn = cdn;
return args;
});
// 当环境变量user_analyzer为true使用
if (process.env.use_analyzer) {
config
.plugin("webpack-bundle-analyzer")
.use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
}
},
configureWebpack: config => {
config.externals = cdn.externals;
// 生产环境下
if (process.env.NODE_ENV === "production") {
// 公共代码抽离
config.optimization = {
// 分割代码块
splitChunks: {
cacheGroups: {
//公用模块抽离
common: {
chunks: "initial",
minSize: 0, //大于0个字节
minChunks: 2 //抽离公共代码时,这个代码块最小被引用的次数
},
//第三方库抽离
vendor: {
priority: 1, //权重
test: /node_modules/,
chunks: "initial",
minSize: 0, //大于0个字节
minChunks: 2 //在分割之前,这个代码块最小应该被引用的次数
}
}
}
};
}
// 生产环境下启用gzip
if (process.env.NODE_ENV === "production") {
return {
plugins: [
new CompressionPlugin({
algorithm: "gzip",
test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
threshold: 10240, // 对超过10k的数据进行压缩
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 是否删除原文件
})
]
};
}
[
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
];
},
runtimeCompiler: true,
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
// css: {
// extract: true,
// requireModuleExtension: false
// }
devServer: {
port: 8089,
proxy: {
// "/": {
// target: "http://*******",
// changeOrigin: true
// }
}
}
};
在index.html文件中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2228877_yqhtfstcjzm.css">
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%=css%>" rel="preload" as="style">
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<!-- <link href="<%=js%>" rel="preload" as="script"> -->
<script src="<%=js%>"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>