提交生产打包配置

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 /dev/dist/
+/dev/pkg/
 ./view
 npm-debug.log*
 yarn-debug.log*

dev/.babelrc

@@ -12,5 +12,6 @@
         ["transform-es2015-modules-commonjs-simple", {
             "noMangle": true
         }], "transform-vue-jsx", "transform-runtime"
-    ]
+    ],
+    "sourceMaps": true
 }

dev/build/build.js

@@ -10,7 +10,7 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const tools = require('./tools')
-const webpackConfig = require('./webpack.dev.conf')
+const webpackConfig = require('./webpack.prod.conf')
 
 const spinner = ora('building for production...')
 spinner.start()

dev/build/dev.js

@@ -1,6 +1,6 @@
 'use strict'
 require('./check-versions')();
-
+process.env.NODE_ENV = 'development'
 const path = require('path'),
     chalk = require('chalk'),
     webpack = require('webpack'),

dev/build/tools.js

@@ -81,9 +81,20 @@ const generateHtmlWebpackPlugin = (srcViewPath, itemPath) => {
             inject: false
         }
     if (itemPath.match(/(.+)index\.html$/)) {
-        htmlPluginOption.chunks = [getChunk(srcViewPath, matchs)];
+        htmlPluginOption.chunks = [getChunk(srcViewPath, matchs),'vendor'];
         htmlPluginOption.inject = true;
     }
+    if (process.env.NODE_ENV === 'production') {
+        htmlPluginOption.minify = {
+            removeComments: true,
+            collapseWhitespace: true,
+            removeAttributeQuotes: true,
+            // more options:
+            // https://github.com/kangax/html-minifier#options-quick-reference
+        };
+        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+        htmlPluginOption.chunksSortMode = 'dependency';
+    }
 
     const htmlPlugin = new HtmlWebpackPlugin(htmlPluginOption)
 

dev/build/webpack.base.conf.js

@@ -3,6 +3,7 @@ const path = require('path'),
     utils = require('./utils'),
     config = require('../config'),
     vueLoaderConfig = require('./vue-loader.conf'),
+    CopyWebpackPlugin = require('copy-webpack-plugin'),
     tools = require('./tools');
 
 function resolve(dir) {
@@ -14,12 +15,9 @@ module.exports = {
     entry: tools.getEntrys(),
     output: {
         path: config.common.assetsRoot,
-        // filename: '[name].[hash:8].js',
-        // chunkFilename: "bundle/[name].[chunkhash:8].js",
         filename: 'js/[name].js',
         chunkFilename: "js/bundle/[name].js",
-        publicPath: config.common.assetsPublicPath
-            // process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
+        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
     },
     resolve: {
         extensions: ['.js', '.vue', '.json'],
@@ -72,6 +70,14 @@ module.exports = {
             }
         ]
     },
+    plugins: [
+        // copy custom static assets
+        new CopyWebpackPlugin([{
+            from: path.resolve(__dirname, path.join(config.common.src, config.common.static)),
+            to: config.common.static,
+            ignore: ['.*']
+        }]),
+    ],
     node: {
         // prevent webpack from injecting useless setImmediate polyfill because Vue
         // source contains it (although only uses it if it's native).

dev/build/webpack.dev.conf.js

@@ -5,7 +5,6 @@ const config = require('../config')
 const merge = require('webpack-merge')
 const path = require('path')
 const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
@@ -39,12 +38,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
             // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
             allChunks: true,
         }),
-        // copy custom static assets
-        new CopyWebpackPlugin([{
-            from: path.resolve(__dirname, path.join(config.common.src, config.common.static)),
-            to: config.common.static,
-            ignore: ['.*']
-        }]),
         new BrowserSyncPlugin({
             host: 'localhost',
             port: config.dev.port,

dev/build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const tools = require('./tools')
+
+const env = process.env.NODE_ENV === 'testing' ?
+    require('../config/test.env') :
+    require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+    mode: 'production',
+    module: {
+        rules: utils.styleLoaders({
+            sourceMap: config.build.productionSourceMap,
+            extract: true,
+            usePostCSS: true
+        })
+    },
+    devtool: config.build.productionSourceMap ? config.build.devtool : false,
+    output: {
+        filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
+        chunkFilename: utils.assetsPath('js/bundle/[name].[chunkhash:8].js')
+    },
+    optimization: {
+        // minimize: false,
+        runtimeChunk: {
+            name: 'vendor'
+        },
+        splitChunks: {
+            cacheGroups: {
+                vendor: {
+                    chunks: "initial",
+                    test: path.join(__dirname, '../node_modules'),
+                    name: "vendor",
+                    enforce: true
+                },
+                common: {
+                    chunks: "initial",
+                    test: path.join(__dirname, config.common.src, '/lib'),
+                    name: "vendor",
+                    enforce: true
+                }
+            }
+        }
+    },
+    plugins: [
+        // http://vuejs.github.io/vue-loader/en/workflow/production.html
+        new webpack.DefinePlugin({
+            'process.env': env
+        }),
+        new UglifyJsPlugin({
+            uglifyOptions: {
+                compress: {
+                    warnings: false
+                }
+            },
+            sourceMap: config.build.productionSourceMap,
+            parallel: true
+        }),
+        // extract css into its own file
+        new ExtractTextPlugin({
+            filename: utils.assetsPath('style/[name].[hash:8].css'),
+            // Setting the following option to `false` will not extract CSS from codesplit chunks.
+            // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+            // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+            // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+            allChunks: true,
+        }),
+        // Compress extracted CSS. We are using this plugin so that possible
+        // duplicated CSS from different components can be deduped.
+        new OptimizeCSSPlugin({
+            cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
+        }),
+        // see https://github.com/ampedandwired/html-webpack-plugin
+        ...tools.htmlPlugins,
+        // keep module.id stable when vendor modules does not change
+        new webpack.HashedModuleIdsPlugin(),
+        // enable scope hoisting
+        new webpack.optimize.ModuleConcatenationPlugin(),
+        // split vendor js into its own file
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name: 'vendor',
+        //     minChunks(module) {
+        //         // any required modules inside node_modules are extracted to vendor
+        //         return (
+        // module.resource &&
+        // /\.js$/.test(module.resource) &&
+        // module.resource.indexOf(
+        //     path.join(__dirname, '../node_modules')
+        // ) === 0
+        //         )
+        //     }
+        // }),
+        // new webpack.optimize.
+        // extract webpack runtime and module manifest to its own file in order to
+        // prevent vendor hash from being updated whenever app bundle is updated
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name: 'manifest',
+        //     minChunks: Infinity
+        // }),
+        // This instance extracts shared chunks from code splitted chunks and bundles them
+        // in a separate chunk, similar to the vendor chunk
+        // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name: 'app',
+        //     async: 'vendor-async',
+        //     children: true,
+        //     minChunks: 3
+        // }),
+    ]
+})
+
+if (config.build.productionGzip) {
+    const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+    webpackConfig.plugins.push(
+        new CompressionWebpackPlugin({
+            asset: '[path].gz[query]',
+            algorithm: 'gzip',
+            test: new RegExp(
+                '\\.(' +
+                config.build.productionGzipExtensions.join('|') +
+                ')$'
+            ),
+            threshold: 10240,
+            minRatio: 0.8
+        })
+    )
+}
+
+if (config.build.bundleAnalyzerReport) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

dev/config/index.js

@@ -6,17 +6,17 @@ module.exports = {
         // Paths
         src: '../src',
         view: 'view', //视图目录名
-        dist_view: '../dist/', //若不是用后端代理，该目录路径需保持与assetsRoot相同
+        dist_view: '../pkg/', //若不是用后端代理，该目录路径需保持与assetsRoot相同
         static: 'static', //静态文件，直接拷贝，不打包
-        assetsRoot: path.resolve(__dirname, '../dist'),
-        assetsPublicPath: '/',
-        assetsSubDirectory: 'assets'
+        assetsRoot: path.resolve(__dirname, '../pkg'),
+        assetsSubDirectory: '' //assets
     },
     dev: {
         host: 'localhost',
         port: 8081,
         proxyUrl: '', //http://localhost:8080/
         autoOpenBrowser: false,
+        assetsPublicPath: '/',
         // https://webpack.js.org/configuration/devtool/#development
         devtool: 'cheap-module-eval-source-map', //'source-map',
         // If you have problems debugging vue-files in devtools,
@@ -31,7 +31,7 @@ module.exports = {
         productionSourceMap: true,
         // https://webpack.js.org/configuration/devtool/#production
         devtool: '#source-map',
-
+        assetsPublicPath: '/',//cdn: //qb.com
         // Gzip off by default as many popular static hosts such as
         // Surge or Netlify already gzip all static assets for you.
         // Before setting to `true`, make sure to:

dev/src/lib/lib.js

@@ -0,0 +1 @@
+console.log("这是一个lib测试文件")

dev/src/view/bid/list/busi.js

@@ -1,5 +1,7 @@
 console.log("这是一个业务脚本1")
 
+import lib from '@/lib/lib'
+
 export const aa = function(){
     console.log("aabb")
 }

dev/src/view/bid/list/index.js

@@ -11,7 +11,7 @@ require.ensure([], function(){
 
 // console.log(busi.a)
 
-console.log('这是 list/index.js')
+console.log('这是 list/index.js 9999')
 
 new Vue({
     el: '#wrapper',

dev/src/view/vue/test.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script>
-require('./test.scss')
+require("./test.scss");
 export default {
   name: "test",
   data() {
@@ -16,7 +16,11 @@ export default {
         age: "12"
       }
     };
-  }
+  },
+  mounted() {
+    console.log("子组件已挂载");
+  },
+  methods: {}
 };
 </script>
 <style lang="scss" scoped>

view/_common/child.html

@@ -0,0 +1 @@
+<img style="margin-top: 200px;position: absolute;left: 0;" width="100%" src="/assets/img/activity_02.e923140.png" alt="">

view/_common/var.html

@@ -0,0 +1,2 @@
+<meta name="renderer" content="webkit">
+<meta name="keywords" content="P2P,理财,投资,安全保障 ,本息 ,金融 ,互联网 ,借款, 收益, 贷款、">

view/bid/detail/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {include file="_common/var.htm"}
+    <title>Document</title>
+</head>
+<body>
+    bid/detail 页
+<script type="text/javascript" src="/js/bid/detail/index.js"></script></body>
+</html>
+

view/bid/list/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+<link href="/assets/style/bid/list/index.css" rel="stylesheet"></head>
+
+<body>
+    <div>
+        {include file="_common/var.htm"} bid/list 页
+    </div>
+
+    <div id="wrapper">
+        {{data}}
+        <test></test>
+    </div>
+
+<script type="text/javascript" src="/js/bid/list/index.js"></script></body>
+
+</html>

view/home/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {include file="_common/var.htm"}
+    <title>Document</title>
+</head>
+<body>
+    home 页
+<script type="text/javascript" src="/js/home/index.js"></script></body>
+</html>