老vue專案webpack3升級到webpack5全過程記錄(一)

webhmy發表於2021-05-20

背景

19年新建的vue專案，使用的是webpack3，隨著專案的積累，元件的增多導致本地構建，線上打包等操作速度極慢，非常影響開發效率和部署效率，基於此問題，本次對webpack及相關外掛進行了優化和升級。本博文分為2篇，第 1 篇會直接附上可執行的程式碼（去除了一些業務程式碼配置），直接貼上複製即可使用（注意是基於vue2.0專案原配置基礎上的修改哦，在網上找了一堆都是升級過程的各種坑說明，不如直接貼上複製執行來的爽丫~~~），第 2 篇也會對相關的修改和遇到的坑進行描述說明。

升級效果

1、本地構建
第一次構建 5分鐘縮短至 1.5分鐘左右， 構建時間提升近 4 倍；
更新構建由 5-10s 縮短至 1-5s ，構建提升 2 倍；
2、線上打包
執行npm run build 由10-15分鐘縮短至 3-5分鐘，構建時間提升近4倍；

升級過程

1. 更新webpack依賴

yarn upgrade webpack@5.37.0
yarn add webpack-dev-server webpack-cli -D

更新其他相關的元件，這裡不需要一個個找了，可以使用npm-check-updates一鍵升級所需的元件，不再贅述怎麼用的了，百度一下，你就知道，實在不會就一個個install吧~

2. `package.json`啟動命令修改

  "scripts": {
    "dev": "npx webpack serve --config build/webpack.dev.conf.js --color --progress",
    "build": "node build/build.js",
    "dll": "npx webpack --config build/webpack.dll.conf.js",
    "start": "npm run dev"
  }

3、`webpack.base.conf.js`配置修改

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require('webpack')
const vueLoaderConfig = require('./vue-loader.conf')
const { VueLoaderPlugin } = require('vue-loader');

function resolve (dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.ts'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.ts'],
        alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            pages: resolve('src/pages')
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            },
            {
                test: /\.tsx?$/,
                exclude: resolve('node_modules'),
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: "ts-loader",
                        options: { appendTsxSuffixTo: [/\.vue$/], transpileOnly: true }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: resolve('node_modules'),
                include: resolve('src')
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    filename: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            }
        ]
    },
    node: {
        global: false
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery'
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: path.resolve(__dirname, './vendors.manifest.json')
        })
    ]
}

4、`webpack.dev.conf.js`配置修改

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const { merge } = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  devtool: config.dev.devtool,
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, 
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, 
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body',
      scriptLoading: 'blocking',
      minify: {
        removeComments: true
      }
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../static'),
          to: config.dev.assetsSubDirectory,
          globOptions: {
            dot: true,
            gitignore: true,
            ignore: ['.*'],
          }
        },
      ]
    })
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      process.env.PORT = port
      devWebpackConfig.devServer.port = port
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors  ? utils.createNotifierCallback() : undefined
      }))
      resolve(devWebpackConfig)
    }
  })
})

5、`webpack.prod.conf.js`配置修改

'use strict'
const path = require('path')
const utils = require('./utils')
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 HtmlWebpackPlugin = require('html-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
    mode: "production",
    module: {
        rules: utils.styleLoaders({
            sourceMap: false,
            extract: true,
            usePostCSS: true
        })
    },
    devtool: config.build.devtool,
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
        clean: true
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin(),
            new OptimizeCSSPlugin(),
        ],
        runtimeChunk: { name: 'runtime' },
        concatenateModules: true,
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                    priority: -10
                },
                'async-vendors': {
                    test: /[\\/]node_modules[\\/]/,
                    minChunks: 2,
                    chunks: 'async',
                    name: 'async-vendors'
                }
            },
        },
        moduleIds: 'deterministic'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new MiniCssExtractPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
        }),
        new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'index.html',
            inject: true,
            scriptLoading: 'blocking',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'auto'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, '../static'),
                    to: config.build.assetsSubDirectory,
                    globOptions: {
                        dot: true,
                        gitignore: true,
                        ignore: ['.*'],
                    }
                },
            ]
        })
    ]
})

if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            filename: '[path][base].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
            threshold: 10240,
            minRatio: 0.8,
            deleteOriginalAssets: true
        })
    )
}

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

6、`utils.js`配置修改

'use strict'
const path = require('path')
const config = require('../config')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production' ?  config.build.assetsSubDirectory : config.dev.assetsSubDirectory;
  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text 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 [
        {
          loader: MiniCssExtractPlugin.loader,
        }
      ].concat(loaders)
    } else {
      return [
        {
          loader: 'style-loader'
        }
      ].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    // stylus: generateLoaders('stylus'),
    // styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension];

    // console.log("css-loader", loader)
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

轉載請說明來處黑瑪魚的前端部落格

【vue-cli3升級】老專案提速50%（一）
2019-03-03
Vue
升級 PHP7 過程記錄
2019-02-27
PHP
【vue-cli3升級】老專案提速50%（二）
2019-01-17
Vue
專案 Laravel 框架 5.1 升級到 5.5 過程中的一些問題
2019-10-11
Laravel框架
從寫博到出書：過程全記錄
2021-09-09
Flutter專案整合mqtt的過程記錄
2019-11-01
FlutterMQQT
vue-cli3.0 升級記錄
2019-02-25
Vue
collection v1.3.1升級全記錄
2020-10-22
LLM本地部署全過程記錄
2024-05-10
記錄一次Django部署到寶塔Linux皮膚的全過程
2019-07-24
DjangoLinux
vue-cli3專案升級到 vue-cli4 的方法總結
2020-03-18
Vue
000 上傳本地庫到Github遠端庫過程全記錄
2022-06-13
Github
基於React企業級SPA專案搭建全記錄
2019-10-28
React
記升級 macOS Mojave 過程中的一件小事
2018-09-26
Mac
記一次uboot升級過程的兩個坑
2020-06-21
boot
synchronized升級過程
2024-08-15
synchronized
執行一個專案中間報錯裝包過程記錄
2020-10-15
升級Webpack5實踐
2021-10-22
Web
Vue 專案升級到 webpack4.x 小紀【附程式碼】
2018-08-14
VueWeb
# Laravel 5.5 升級到 6.0 踩坑記錄
2019-10-13
Laravel
記錄NLTK安裝使用全過程--python
2022-03-28
Python
記錄一次vue-cli工程打包部署過程
2020-09-29
Vue
vue-cli專案升級webpack4
2019-08-09
VueWeb
升級vue專案中的外掛版本
2021-01-01
Vue
【保姆級】Python專案(Flask網頁)部署到Docker的完整過程
2021-07-15
PythonFlask網頁Docker
Apache DolphinScheduler 1.3.4升級至3.1.2版本過程中的踩坑記錄
2024-08-02
Apache
一個 Golang 專案的測試實踐全記錄
2019-06-18
Golang
Laravel 5.5.* 升級到 5.7.* 問題記錄
2019-01-03
Laravel
springboot升級過程中踩坑定位分析記錄 | 京東雲技術團隊
2023-04-28
Spring Boot
docker-compose 部署 Laravel 專案全記錄
2020-03-01
DockerLaravel
【原創】老谷"專案管理MSN群"6.23記錄
2019-04-05
專案管理
PR一個 composer包過程記錄
2021-01-20
【原創】記錄一次Tomcat總是載入舊專案的解決過程
2024-06-24
Tomcat
vue專案開發過程常見問題
2018-07-29
Vue
vue每時每刻-專案介紹-搭建過程
2021-01-05
Vue
Swift3.0專案升級到4.2遇到問題
2019-03-26
Swift
CodeRiver 全棧全平臺開源專案：全面升級從新出發
2019-01-03
全棧
老專案升級總結之程式碼相容性檢測
2018-06-29

老vue專案webpack3升級到webpack5全過程記錄(一)

背景

升級效果

升級過程

1. 更新webpack依賴

2. package.json啟動命令修改

3、webpack.base.conf.js配置修改

4、webpack.dev.conf.js配置修改

5、webpack.prod.conf.js配置修改

6、utils.js配置修改

相關文章

2. `package.json`啟動命令修改

3、`webpack.base.conf.js`配置修改

4、`webpack.dev.conf.js`配置修改

5、`webpack.prod.conf.js`配置修改

6、`utils.js`配置修改