10分钟vue-cli2构建项目升级到webpack4配置-白红宇

一、包版本替换

webpack

"webpack": "^3.6.0" => "^4.29.6""webpack-bundle-analyzer": "^2.9.0" => "^3.1.0""webpack-cli": "^3.3.0" (ADD)"webpack-dev-server": "^2.9.1" => "^3.1.11""webpack-merge": "^4.1.0" => "^4.2.1"复制代码

loader

"css-loader": "^0.28.0" => "^2.1.1""file-loader": "^1.1.4" => "^3.0.1""inject-loader": "^3.0.0" => "^4.0.1""postcss-loader": "^2.0.8" => "^3.0.0""url-loader": "^0.5.8" => "^1.1.2""vue-loader": "^13.3.0" => "^15.7.0""vue-style-loader": "^3.0.1" => "^4.1.2""vue-template-compiler": "^2.5.2" => "^2.6.9"复制代码

plugin

"copy-webpack-plugin": "^4.0.1" => "^5.0.1""friendly-errors-webpack-plugin": "^1.6.1" => "^1.7.0""html-webpack-plugin": "^2.30.1" => "^3.2.0""optimize-css-assets-webpack-plugin": "^3.2.0" => "^5.0.1""extract-text-webpack-plugin": "^3.0.0"  (DEL)"mini-css-extract-plugin": "^0.5.0" (ADD)复制代码

eslint

"eslint": "^4.15.0" => "^4.19.1""eslint-config-standard": "^10.2.1" => "^11.0.0""eslint-friendly-formatter": "^3.0.0" => "^4.0.1""eslint-loader": "^1.7.1" => "^2.0.0""eslint-plugin-import": "^2.7.0" => "^2.12.0""eslint-plugin-node": "^5.2.0" => "^6.0.1""eslint-plugin-promise": "^3.4.0" => "^3.7.0""eslint-plugin-standard": "^3.0.1" => "^3.1.0""eslint-plugin-vue": "^4.0.0" => "^4.5.0"复制代码

二、修改配置

webpack.dev.conf.js

+  const { VueLoaderPlugin } = require('vue-loader')...plugins: [+   new VueLoaderPlugin()...复制代码

webpack.prod.conf.js

-  const ExtractTextPlugin = require('extract-text-webpack-plugin')-  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')+  const MiniCssExtractPlugin = require('mini-css-extract-plugin')+  const { VueLoaderPlugin } = require('vue-loader')...const webpackConfig = merge(baseWebpackConfig, {...+  optimization: {+    minimize: true,+    splitChunks: {+      cacheGroups: {+        vendors: {+          test: /[\\/]node_modules[\\/]/,+          chunks: 'initial',+          name: 'vendors',+        },+        'async-vendors': {+          test: /[\\/]node_modules[\\/]/,+          minChunks: 2,+          chunks: 'async',+          name: 'async-vendors'+      }+    },+    runtimeChunk: { name: 'runtime' }+  },   plugins: [+   new VueLoaderPlugin(),+   new MiniCssExtractPlugin({+    filename: utils.assetsPath('css/[name].[contenthash].css'),+    allChunks: true,+  }),-  new ExtractTextPlugin({-    filename: utils.assetsPath('css/[name].[contenthash].css'),-    allChunks: true,-  }),-  new UglifyJsPlugin({-    uglifyOptions: {-       compress: {-         warnings: false-       }-    },-   sourceMap: config.build.productionSourceMap,-   parallel: true-  }),-  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-  }),复制代码

optimization配置增加了很多配置参数,取代了很多插件。如：minimize: true取代了 new UglifyJsPlugin。

util.js

- const ExtractTextPlugin = require('extract-text-webpack-plugin')+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')  function generateLoaders (loader, loaderOptions) {    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]    if (loader) {      loaders.push({        loader: loader + '-loader',        options: Object.assign({}, loaderOptions, {          sourceMap: options.sourceMap        })      })    }    // Extract CSS when that option is specified    // (which is the case during production build)    // if (options.extract) {
        //   return ExtractTextPlugin.extract({
        //     use: loaders,    //     fallback: 'vue-style-loader'    //   })    // } else {
        //   return ['vue-style-loader'].concat(loaders)    // }+   return [+     options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',+   ].concat(loaders)+ }复制代码

extract-text-webpack-plugin插件目前还未完全支持webpack4，目前解决方案是用mini-css-extract-plugin代替。

结束。

祝学习进步

邓文斌

2019年3月17日