From 25fb257a53783af9482b5b8ea36b1f7aa94c9a23 Mon Sep 17 00:00:00 2001 From: youngS Date: Fri, 23 Apr 2021 18:12:15 +0800 Subject: [PATCH] =?UTF-8?q?vue=20=E6=89=93=E5=8C=85=E5=91=BD=E4=BB=A4?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fir_client/package.json | 2 + fir_client/vue.config.js | 153 +++++++++++++++++++++++++++------------ 2 files changed, 108 insertions(+), 47 deletions(-) diff --git a/fir_client/package.json b/fir_client/package.json index beafc0a..cdf1d43 100644 --- a/fir_client/package.json +++ b/fir_client/package.json @@ -32,6 +32,8 @@ "babel-plugin-component": "^1.1.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", + "html-webpack-plugin": "^5.3.1", + "script-ext-html-webpack-plugin": "^2.1.5", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { diff --git a/fir_client/vue.config.js b/fir_client/vue.config.js index e9ce6bd..d530388 100644 --- a/fir_client/vue.config.js +++ b/fir_client/vue.config.js @@ -4,55 +4,63 @@ const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } -module.exports = { - pages: { - index: { - // page 的入口 - entry: 'src/main.js', - // 模板来源 - template: 'public/index.html', - // 在 dist/index.html 的输出 - filename: 'index.html', - // 当使用 title 选项时, - // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> - title: 'FlyApp', - // 在这个页面中包含的块,默认情况下会包含 - // 提取出来的通用 chunk 和 vendor chunk。 - chunks: ['chunk-vendors', 'chunk-common', 'index'] - }, - short: { - // page 的入口 - entry: 'src/short.js', - // entry: 'src/main.short.js', - // 模板来源 - template: 'public/short.html', - // 在 dist/short.html 的输出 - filename: 'short.html', - // 当使用 title 选项时, - // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> - title: '应用下载', - // 在这个页面中包含的块,默认情况下会包含 - // 提取出来的通用 chunk 和 vendor chunk。 - chunks: ['chunk-vendors', 'chunk-common', 'short'] - }, - mshort: { - // page 的入口 - // entry: 'src/short.js', - entry: 'src/main.short.js', - // 模板来源 - template: 'public/short.html', - // 在 dist/short.html 的输出 - filename: 'mshort.html', - // 当使用 title 选项时, - // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> - title: '应用下载', - // 在这个页面中包含的块,默认情况下会包含 - // 提取出来的通用 chunk 和 vendor chunk。 - chunks: ['chunk-vendors', 'chunk-common', 'mshort'] - } +const argv = process.argv; - }, + +const index={ + // page 的入口 + entry: 'src/main.js', + // 模板来源 + template: 'public/index.html', + // 在 dist/index.html 的输出 + filename: 'index.html', + // 当使用 title 选项时, + // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> + title: 'Fly分发平台', + // 在这个页面中包含的块,默认情况下会包含 + // 提取出来的通用 chunk 和 vendor chunk。 + chunks: ['chunk-vendors', 'chunk-common', 'index'] +}; +const mshort={ + // page 的入口 + entry: 'src/main.short.js', + // 模板来源 + template: 'public/short.html', + // 在 dist/short.html 的输出 + filename: 'mshort.html', + // 当使用 title 选项时, + // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> + title: '应用下载', + // 在这个页面中包含的块,默认情况下会包含 + // 提取出来的通用 chunk 和 vendor chunk。 + chunks: ['chunk-vendors', 'chunk-common', 'mshort'] +}; +const short={ + // page 的入口 + entry: 'src/short.js', + // 模板来源 + template: 'public/short.html', + // 在 dist/short.html 的输出 + filename: 'short.html', + // 当使用 title 选项时, + // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> + title: '应用下载', + // 在这个页面中包含的块,默认情况下会包含 + // 提取出来的通用 chunk 和 vendor chunk。 + chunks: ['chunk-vendors', 'chunk-common', 'short'] +}; +let pages = {index,short,mshort}; +const page = argv[3]; +if(page){ + for(const key of Object.keys(pages)){ + if(key === page){ + pages = {key:pages[key]} + } + } +} +module.exports = { + pages: pages, productionSourceMap: false, configureWebpack: { // provide the app's title in webpack's name field, so that @@ -81,6 +89,7 @@ module.exports = { } + config.optimization.splitChunks({ cacheGroups: { vendors: { @@ -94,6 +103,56 @@ module.exports = { } }); + // set preserveWhitespace + config.module + .rule('vue') + .use('vue-loader') + .loader('vue-loader') + .tap(options => { + options.compilerOptions.preserveWhitespace = true; + return options + }) + .end(); + + config.when(!IS_PROD, + config => { + config + .plugin('ScriptExtHtmlWebpackPlugin') + .after('html') + .use('script-ext-html-webpack-plugin', [{ + // `runtime` must same as runtimeChunk name. default is `runtime` + inline: /runtime\..*\.js$/ + }]) + .end(); + config + .optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' // only package third parties that are initially dependent + }, + elementUI: { + name: 'chunk-elementUI', // split elementUI into a single package + priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app + test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm + }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), // can customize your rules + minChunks: 3, // minimum common number + priority: 5, + reuseExistingChunk: true + } + } + }); + config.optimization.runtimeChunk('single'); + + } + ); + }