vue 打包命令修改

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": {

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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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');
+
+                }
+            );
+
 
     }