一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

记录一次webpack3升级webpack5

公司有一个19年的老项目,使用webpack3打包编译,然后经过后续一系列不太合规的维护,存在很多问题

1、运行环境配置

记录一次webpack3升级webpack5
2、编译时间

记录一次webpack3升级webpack5

3、热更新时间

记录一次webpack3升级webpack5

这种情况遇到的同学应该都知道,改个样式等半天的感觉,思路全被打乱了,这使我们的开发效率尤其低下,抽空来做一下升级

先看看升级之后的成果(有些业务代码的错误没改,可以先忽略),编译时间减少了35%,热更新时间减少83.7%,热更新时间只有1s多,这效率瞬间就上来了

编译时间

记录一次webpack3升级webpack5

热更新时间

记录一次webpack3升级webpack5

开始升级

网上找了很多资料,其实思路都是一样的

  • 先把webpack相关升级,接着把各个包升级到兼容webpack5的版本
  • 升级配置项,有些配置项是webpack3的写法,webpack5已经弃用了
  • 最后根据控制台报错逐步完善(这一步各个项目安装依赖不一样,报错可能也不一样)

项目结构

build
|-------util.js
|-------webpack.base.js
|-------webpack.dev.conf.js
|-------webpack.prod.conf.js

webpack升级

// 先卸载webpack相关
npm uninstall webpack webpack-dev-server webpack-cli
// 安装webpack最新版本
npm install webpack webpack-dev-server webpack-cli

项目其他依赖升级,可以使用命令行工具完成

npm install -g npm-check-updates 
// 然后直接输入,你会发现需要升级的包
npm-check-updates
// 接着使用下面命令进行升级
ncu -u

配置项升级

从这里开始你就可以运行指令来检查webpack问题了,比如我这边的npm run dev

启动脚本

检查自己的package.json

"dev": "cross-env BABEL_ENV=development NODE_ENV=dev01 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

npm run dev的时候会报错,这里有两个问题

  • webpack在升级到4的时候,启动脚本就从webpack-dev-server变成了webpack serve
  • 不支持选项 --inline,在webpack3中这个配置是让所有的模块内联到主模块中,好处当然是减少了 HTTP 请求的数量,坏处一大堆。Webpack 4 以后的版本默认启用了代码分割功能,这可以自动地将应用程序分割成多个较小的代码块,并在需要时按需加载这些代码块。因此,使用 --inline 选项可能不再是必要的
    记录一次webpack3升级webpack5
配置文件修改
webpack.base.conf.js

1、解析vue文件

const { VueLoaderPlugin } = require('vue-loader')
let webpackConfig = {
    plugins: [
        new VueLoaderPlugin(),
    ]
}

2、资源解析

webpack内置了url-loader,file-loader等等,资源解析直接调整使用使用type:’asset’

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    type: 'asset',
    parser: {
        dataUrlCondition: {
            maxSize: 10 * 1024 // 10kb
        }
    },
    generator: {
        filename: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
 }
webpack.dev.conf.js

1、webpack-merge要解构出来

记录一次webpack3升级webpack5

const { merge } = require('webpack-merge')

2、extract-text-webpack-pluginoptimize-css-assets-webpack-plugin已经过时了需要由mini-css-extract-plugincss-minimizer-webpack-plugin来代替

记录一次webpack3升级webpack5
3、NamedModulesPlugin已过时,由optimization的moduleIds进行替换

optimization: {
    moduleIds: 'named' // webpack5 采用此方式代替 NamedModulesPlugin
},

4、devServer改动很大,可以参考官网改动

我自己的修改

{
    // webpack3下面的配置都收敛到client中了
    // clientLogLevel: 'warning',
    // overlay: config.dev.errorOverlay ? {
    //   warnings: false,
    //   errors: true,
    // } : false,
    // progress: true
    client: {
      logging: 'warn',
      overlay:  config.dev.errorOverlay ? {
        warnings: false,
        errors: true,
      } : false,
      progress: true,
    },
    historyApiFallback: true,
    hot: true,
    host: "0.0.0.0",
    port: process.env.PORT || config.dev.port,
    open: true,
    
    // publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    // quiet: true, // necessary for FriendlyErrorsPlugin
    // watchOptions: {
    //   poll: config.dev.poll,
    // },
    // https: false,
    
 },

5、由于vue-loader升级了,所以之前css如果使用/deep/可能出错,相应调整一下

记录一次webpack3升级webpack5
6、到这一步再运行npm run dev的时候又报了一个问题,所有的依赖包都报找不到vue

记录一次webpack3升级webpack5
webpack运行时,依赖包会从当前目录开始查找node_modules,因为我们的webpack.dev.conf和node_modules没在同级就会抛出错误,用下面方式解决

resolve: {
    alias: {  
      'vue$': path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js') // 根据你的实际情况调整路径  
    }
}

7、另外项目中使用了vux-loader,导致报错,因为没有兼容webpack5的版本,需要用其他插件替换

此时项目已经升级差不多了,剩下的就是解决报错问题了,项目语法问题解决语法问题,依赖问题就找webpack5兼容的包,或者用其他包替换

再次回到一开始的环境配置问题

如何让我们切换环境的时候,不需要配置很多指令呢

第一个方案肯定就是env文件

.env文件是一个全局默认配置文件,在所有的环境中都会被加载和合并。它用于存储环境变量,可以在开发、测试、生产等不同环境下配置不同的变量值,以便在项目中使用。

在.env文件中,可以使用键值对的形式创建变量,其中键名必须以VUE_APP_开头。例如,VUE_APP_BASE_API = ‘/api’。

根据项目的需要,可以在不同的环境下创建.env文件,例如.env.development、.env.production等。这些文件可以用于配置针对不同环境的变量值。

在项目中使用.env文件时,可以通过process.env对象来访问这些变量。例如,使用console.log(process.env.VUE_APP_BASE_API)可以输出VUE_APP_BASE_API的值。

第二种方法,根据环境给命令行传参数,类似npm run dev — NODE_ENV=fat03
在页面中打印process.argv就会得到我们传递的参数

记录一次webpack3升级webpack5

原文链接:https://juejin.cn/post/7322268449409663011 作者:houlian

(0)
上一篇 2024年1月11日 上午10:58
下一篇 2024年1月11日 上午11:08

相关推荐

发表评论

登录后才能评论