feat: upgrade & optimizate webpack4 😊 #24

build/utils.js

@@ -1,6 +1,5 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const path = require('path')
+const config = require('../config')
 
 exports.assetsPath = function (_path) {
   var assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -11,41 +10,39 @@ exports.assetsPath = function (_path) {
 
 exports.cssLoaders = function (options) {
   options = options || {}
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: sourceLoader,
-        fallback: 'vue-style-loader'
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
       })
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
     }
+
+    return ['vue-style-loader'].concat(loaders)
   }
 
   // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
   return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
   }
 }
 
@@ -57,7 +54,7 @@ exports.styleLoaders = function (options) {
     var loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
-      loader: loader
+      use: loader
     })
   }
   return output

build/vendor-manifest.json

@@ -1 +1 @@
-{"name":"vendor_library","content":{"./node_modules/axios/lib/utils.js":{"id":0,"meta":{}},"./node_modules/process/browser.js":{"id":1,"meta":{}},"./node_modules/webpack/buildin/global.js":{"id":2,"meta":{}},"./node_modules/axios/lib/defaults.js":{"id":3,"meta":{}},"./node_modules/axios/lib/helpers/bind.js":{"id":4,"meta":{}},"./node_modules/axios/lib/adapters/xhr.js":{"id":5,"meta":{}},"./node_modules/axios/lib/core/createError.js":{"id":6,"meta":{}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":7,"meta":{}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":8,"meta":{}},"./node_modules/crypto-js/core.js":{"id":9,"meta":{}},"./node_modules/raven-js/src/utils.js":{"id":10,"meta":{}},"./node_modules/js-cookie/src/js.cookie.js":{"id":12,"meta":{}},"./node_modules/q/q.js":{"id":13,"meta":{}},"./node_modules/timers-browserify/main.js":{"id":14,"meta":{}},"./node_modules/setimmediate/setImmediate.js":{"id":15,"meta":{}},"./node_modules/axios/index.js":{"id":16,"meta":{}},"./node_modules/axios/lib/axios.js":{"id":17,"meta":{}},"./node_modules/is-buffer/index.js":{"id":18,"meta":{}},"./node_modules/axios/lib/core/Axios.js":{"id":19,"meta":{}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":20,"meta":{}},"./node_modules/axios/lib/core/settle.js":{"id":21,"meta":{}},"./node_modules/axios/lib/core/enhanceError.js":{"id":22,"meta":{}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":23,"meta":{}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":24,"meta":{}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":25,"meta":{}},"./node_modules/axios/lib/helpers/btoa.js":{"id":26,"meta":{}},"./node_modules/axios/lib/helpers/cookies.js":{"id":27,"meta":{}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":28,"meta":{}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":29,"meta":{}},"./node_modules/axios/lib/core/transformData.js":{"id":30,"meta":{}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":31,"meta":{}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":32,"meta":{}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":33,"meta":{}},"./node_modules/axios/lib/helpers/spread.js":{"id":34,"meta":{}},"./node_modules/vue/dist/vue.min.js":{"id":35,"meta":{}},"./node_modules/vue-router/dist/vue-router.common.js":{"id":36,"meta":{}},"./node_modules/vue-i18n/dist/vue-i18n.common.js":{"id":37,"meta":{}},"./node_modules/vuex/dist/vuex.esm.js":{"id":38,"meta":{"harmonyModule":true},"exports":["Store","mapState","mapMutations","mapGetters","mapActions","default"]},"./node_modules/crypto-js/sha256.js":{"id":39,"meta":{}},"./node_modules/crypto-js/md5.js":{"id":40,"meta":{}},"./node_modules/raven-js/src/singleton.js":{"id":41,"meta":{}},"./node_modules/raven-js/src/raven.js":{"id":42,"meta":{}},"./node_modules/raven-js/vendor/TraceKit/tracekit.js":{"id":43,"meta":{}},"./node_modules/raven-js/vendor/json-stringify-safe/stringify.js":{"id":44,"meta":{}},"./node_modules/raven-js/src/configError.js":{"id":45,"meta":{}},"./node_modules/raven-js/src/console.js":{"id":46,"meta":{}}}}
+{"name":"vendor_library","content":{"./node_modules/axios/lib/utils.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/global.js":{"id":1,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/src/utils.js":{"id":2,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/defaults.js":{"id":3,"buildMeta":{"providedExports":true}},"./node_modules/timers-browserify/main.js":{"id":4,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":5,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/vendor/json-stringify-safe/stringify.js":{"id":6,"buildMeta":{"providedExports":true}},"./node_modules/crypto-js/core.js":{"id":7,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":8,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":9,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/createError.js":{"id":10,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/adapters/xhr.js":{"id":11,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/bind.js":{"id":12,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/src/console.js":{"id":13,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/src/configError.js":{"id":14,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/vendor/md5/md5.js":{"id":15,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/vendor/TraceKit/tracekit.js":{"id":16,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/src/raven.js":{"id":17,"buildMeta":{"providedExports":true}},"./node_modules/raven-js/src/singleton.js":{"id":18,"buildMeta":{"providedExports":true}},"./node_modules/crypto-js/md5.js":{"id":19,"buildMeta":{"providedExports":true}},"./node_modules/crypto-js/sha256.js":{"id":20,"buildMeta":{"providedExports":true}},"./node_modules/vuex/dist/vuex.esm.js":{"id":21,"buildMeta":{"exportsType":"namespace","providedExports":["Store","install","mapState","mapMutations","mapGetters","mapActions","createNamespacedHelpers","default"]}},"./node_modules/vue-i18n/dist/vue-i18n.common.js":{"id":22,"buildMeta":{"providedExports":true}},"./node_modules/vue-router/dist/vue-router.esm.js":{"id":23,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/vue/dist/vue.min.js":{"id":24,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/spread.js":{"id":25,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":26,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":27,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":28,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/transformData.js":{"id":29,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":30,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":31,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/cookies.js":{"id":32,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/btoa.js":{"id":33,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":34,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":35,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":36,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/enhanceError.js":{"id":37,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/settle.js":{"id":38,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":39,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/Axios.js":{"id":40,"buildMeta":{"providedExports":true}},"./node_modules/is-buffer/index.js":{"id":41,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/axios.js":{"id":42,"buildMeta":{"providedExports":true}},"./node_modules/axios/index.js":{"id":43,"buildMeta":{"providedExports":true}},"./node_modules/vue-content-placeholder/dist/vue-content-placeholder.min.js":{"id":44,"buildMeta":{"moduleConcatenationBailout":"eval()","providedExports":true}},"./node_modules/vue/dist/vue.runtime.esm.js":{"id":45,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/vue-social-sharing/dist/vue-social-sharing.common.js":{"id":46,"buildMeta":{"providedExports":true}},"./node_modules/vue-meta/lib/vue-meta.js":{"id":47,"buildMeta":{"providedExports":true}},"./node_modules/marked/lib/marked.js":{"id":48,"buildMeta":{"providedExports":true}},"./node_modules/countup/dist/countUp.min.js":{"id":49,"buildMeta":{"providedExports":true}},"./node_modules/setimmediate/setImmediate.js":{"id":50,"buildMeta":{"providedExports":true}},"./node_modules/q/q.js":{"id":51,"buildMeta":{"providedExports":true}},"./node_modules/js-cookie/src/js.cookie.js":{"id":52,"buildMeta":{"providedExports":true}}}}

build/webpack.base.conf.js

@@ -1,20 +1,35 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var webpack = require('webpack')
-var autoprefixer = require('autoprefixer')
-var vueLoaderConfig = require('./vue-loader.conf')
-var svgoConfig = require('../config/svgo-config.json')
-var chalk = require('chalk')
-var ProgressBarPlugin = require('progress-bar-webpack-plugin')
-var HappyPack = require('happypack')
-var os = require('os')
-var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const webpack = require('webpack')
+const autoprefixer = require('autoprefixer')
+const vueLoaderConfig = require('./vue-loader.conf')
+const svgoConfig = require('../config/svgo-config.json')
+const chalk = require('chalk')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const HappyPack = require('happypack')
+const os = require('os')
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-function resolve (dir) {
+const env = process.env.NODE_ENV
+
+const resolve = (dir) => {
   return path.join(__dirname, '..', dir)
 }
 
+const cssLoader = new MiniCssExtractPlugin({
+  use: [
+    'happypack/loader?id=happy-css'
+  ]
+})
+
+// inject happypack accelerate packing for vue-loader @17-08-18
+Object.assign(vueLoaderConfig.loaders, {
+  js: 'happypack/loader?id=happy-babel-vue',
+  css: cssLoader
+})
+
 function createHappyPlugin (id, loaders) {
   return new HappyPack({
     id: id,
@@ -27,8 +42,10 @@ function createHappyPlugin (id, loaders) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/main.js',
+    vendor: ['lodash']
   },
+  mode: env === 'production' ? 'production' : 'development',
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
@@ -107,7 +124,7 @@ module.exports = {
         test: /\.(woff2?|eot|woff|ttf|otf)(\?.*)?$/,
         loader: 'url-loader',
         query: {
-          limit: 100000,
+          limit: 8192,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       }
@@ -140,7 +157,7 @@ module.exports = {
     createHappyPlugin('happy-babel-js', ['babel-loader?cacheDirectory=true']),
     createHappyPlugin('happy-babel-vue', ['babel-loader?cacheDirectory=true']),
     createHappyPlugin('happy-svg', ['svg-sprite-loader']),
-    // createHappyPlugin('happysass', ['css-loader', 'sass-loader']),
+    createHappyPlugin('happy-css', ['css-loader', 'vue-style-loader']),
     new HappyPack({
       loaders: [{
         path: 'vue-loader',

build/webpack.dll.conf.js

@@ -1,8 +1,10 @@
 const path = require('path')
 const webpack = require('webpack')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: {
     vendor: [
       'js-cookie',
@@ -14,10 +16,12 @@ module.exports = {
       'vuex',
       'crypto-js/sha256',
       'crypto-js/md5',
-      'raven-js'
-      // 'vue-touch',
-      // 'vue-content-placeholder'
-      // 'vue-social-sharing'
+      'raven-js',
+      'countup',
+      'marked',
+      'vue-meta',
+      'vue-social-sharing',
+      'vue-content-placeholder'
     ]
   },
   output: {
@@ -26,10 +30,10 @@ module.exports = {
     library: '[name]_library'
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader'
       },
       {
         test: /\.js$/,
@@ -38,18 +42,27 @@ module.exports = {
       }
     ]
   },
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: false // set to true if you want JS source maps
+      }),
+      // Compress extracted CSS. We are using this plugin so that possible
+      // duplicated CSS from different components can be deduped.
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
   plugins: [
+    /*
+      @desc: https://webpack.js.org/plugins/module-concatenation-plugin/
+      "作用域提升(scope hoisting)",使代码体积更小[函数申明会产生大量代码](#webpack3)
+    */
     new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
     new webpack.DllPlugin({
       path: path.join(__dirname, '.', '[name]-manifest.json'),
-      libraryTarget: 'commonjs2',
       name: '[name]_library'
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
     })
   ]
 }