index.html 模板修改 新增 htmlWebpackPlugin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />
<!-- 避免IE使用兼容模式 -->
<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> </title>
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</head>
<body>
<noscript>
<strong
>We're sorry but dz-print doesn't work properly without JavaScript enabled. Please enable it
to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
</html>
var path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
const cdn = {
// 忽略打包的第三方库
externals: {
// vue: "Vue",
// vuex: "Vuex",
// "vue-router": "VueRouter",
// axios: "axios",
// moment: "moment",
// "element-ui": "Element",
echarts: "echarts",
},
// 通过cdn方式使用
js: [
"https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js",
"https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
"https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js",
"https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js",
"https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js",
"https://lib.baomitu.com/echarts/4.0.0/echarts-en.common.js",
],
// css: ["https://cdn.jsdelivr.net/npm/element-ui@2.9.2/lib/theme-chalk/index.css"],
};
module.exports = {
publicPath: "./",
devServer: {
open: true,
port: 8098, // 端口
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// drop_console: process.env.NODE_ENV === "production", //清除 console 语句
// drop_debugger: process.env.NODE_ENV === "production", //清除 debugger 语句
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.externals = cdn.externals;
}
Object.assign(config.resolve, {
alias: {
"@": resolve("./src"),
assets: resolve("./src/assets"),
common: resolve("./src/common"),
components: resolve("./src/components"),
styles: resolve("./src/styles"),
views: resolve("./src/views"),
plugins: resolve("./src/plugins"),
"@business": resolve("./src"),
},
});
},
chainWebpack: (config) => {
// 移除 prefetch 插件
config.plugins.delete("prefetch");
// 移除 preload 插件
config.plugins.delete("preload");
if (process.env.NODE_ENV === "production") {
// 配置cdn引入
config.plugin("html").tap((args) => {
args[0].cdn = cdn;
return args;
});
}
},
};
