阅读 1247

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 UglifyJsPluginoptimization文档

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代替。

结束。

commit详情

示例项目地址

祝学习进步

邓文斌

2019年3月17日

文章分类
前端
文章标签