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

最新推荐文章于 2025-08-08 14:42:54 发布

转载最新推荐文章于 2025-08-08 14:42:54 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c8e468f6fb9a070fa37585e

文章标签：

#webpack #javascript #ViewUI

博客主要介绍了Webpack相关操作，包括包版本替换，涉及Webpack、loader、plugin、eslint；还介绍了配置修改，如webpack.dev.conf.js、webpack.prod.conf.js增加配置参数取代插件，util.js中插件对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。optimization文档

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)
+ }
复制代码