增加dllplugin配置

Author: linfengluo

build/utils.js

@@ -6,6 +6,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 const entriePaths = getEntries()
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
+const dllConfigs = require('../config/dll.conf')
+
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -125,6 +128,17 @@ exports.htmlPlugins = function() {
     }))
   })
 
+  if (dllConfigs.isUsed && process.env.NODE_ENV === 'production') {
+    arr.push(new AddAssetHtmlPlugin([
+      {
+        filepath: dllConfigs.filepath,
+        outputPath: dllConfigs.outputPath,
+        publicPath: dllConfigs.publicPath,
+        includeSourcemap: false
+      }
+    ]))
+  }
+
   return arr
 }
 
@@ -133,6 +147,9 @@ function getPath(...args) {
   return path.join(path.resolve(__dirname, '../src'), ...args);
 }
 
+/*
+* 获取页面入口
+* */
 function getEntries() {
   const files = glob.sync(`${config.base.pagesRoot}/*/*.js`)
   let extries = {}

build/webpack.base.conf.js

@@ -2,24 +2,9 @@
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
+const webpackConfig = require('../config/prod.webpack')
 const webpack = require('webpack')
 
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
-
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: utils.entries(),
@@ -30,58 +15,10 @@ module.exports = {
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath
   },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-    }
-  },
-  module: {
-    rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
+  resolve: webpackConfig.resolvesConfig,
+  module: webpackConfig.modulesConfig,
   node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
     setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
     dgram: 'empty',
     fs: 'empty',
     net: 'empty',

build/webpack.dll.conf.js

@@ -0,0 +1,42 @@
+/**
+ * Created by [email protected] on 2018/3/13.
+ */
+
+const webpack = require('webpack')
+const path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const config = require('../config')
+const webpackConfig = require('../config/prod.webpack')
+const dllConfigs = require('../config/dll.conf')
+const AssetsPlugin = require('assets-webpack-plugin')
+
+module.exports = {
+  output: {
+    path: dllConfigs.devPath,
+    filename: '[name].[hash:8].js',
+    library: '[name]_libs', // 注意与DllPlugin的name参数保持一致 [name]为entry的key
+  },
+  entry: {
+    [dllConfigs.fileName]: dllConfigs.vendor
+  },
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.DllPlugin({
+      path: 'manifest.json', // DllReferencePlugin使用
+      name: '[name]_libs',  // 确保output.library一致
+      context: __dirname, // 建议设置为项目根目录
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: true
+      }
+    }),
+    new AssetsPlugin({
+      filename: `${dllConfigs.fileName}.json`,
+      path: dllConfigs.devPath
+    }),
+    new ExtractTextPlugin('[name].[hash:8].css'),
+  ],
+  resolve: webpackConfig.resolvesConfig,
+  module: webpackConfig.modulesConfig,
+};

build/webpack.dll.config.js

@@ -5,11 +5,7 @@ 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 ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
+const prodWepbackConfig = require('../config/prod.webpack')
 const env = require('../config/prod.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
@@ -26,76 +22,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash:8].js')
   },
-  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('css/[name].[contenthash: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 }
-    }),
-
-    // keep module.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ]),
-
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    })
-  ].concat(utils.htmlPlugins())
+  plugins: prodWepbackConfig.pluginsConfig()
 })
 
 if (config.build.productionGzip) {

build/webpack.prod.conf.js

@@ -0,0 +1,18 @@
+/**
+ * Created by [email protected] on 2018/3/13.
+ */
+const path = require('path')
+const fileName  = 'vendor_dll'
+const dllProdName = require(`../src/units/libs/${fileName}.json`)
+module.exports = {
+  isUsed: true, //是否开启DllPlugins
+  fileName: fileName,
+  devPath: path.resolve(__dirname, '../src/units/libs'),
+  filepath: path.resolve(__dirname, `../src/units/libs/${dllProdName[fileName].js}`),
+  outputPath: 'js',
+  publicPath: '/js/',
+  vendor: [
+    'vue',
+    'vue-router'
+  ]
+}

config/dll.conf.js

@@ -78,13 +78,5 @@ module.exports = {
   base: {
     "isMultiPage": true,
     "pagesRoot": path.resolve(__dirname, '../src/pages')
-  },
-  dll: {
-    isOk: false,
-    path: path.resolve(__dirname, '../src/units/libs'),
-    libs: [
-      'vue',
-      'vue-router'
-    ]
   }
 }