【构建工具】webpack 3、4 升级指南，摆脱低版本的困扰

最新推荐文章于 2024-08-22 09:20:49 发布

wincheshe

最新推荐文章于 2024-08-22 09:20:49 发布

阅读量2.5k

点赞数 1

分类专栏：实习产出前端 -- 构建工具文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/m0_52409770/article/details/129366447

版权

实习产出同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

前端 -- 构建工具

4 篇文章 1 订阅

订阅专栏

一、依赖处理

1.升级通用依赖

借用 ncu 库实现，帮你改写需要升级的package.json 然后再 npm install

ncu -u  <packages> # 可以指定依赖
ncu # 升级全部依赖

大概列了下升级的效果

add-asset-html-webpack-plugin    ^2.1.3  →    ^5.0.2
clean-webpack-plugin            ^0.1.14  →    ^4.0.0
copy-webpack-plugin              ^4.0.1  →   ^11.0.0
css-loader                      ^0.28.7  →    ^6.7.3
es6-promise                      ^4.2.5  →    ^4.2.8
friendly-errors-webpack-plugin   ^1.6.1  →    ^1.7.0
html-webpack-plugin              ^2.2.0  →    ^5.5.0
sass-loader                      ^7.1.0  →   ^13.2.0
vue-loader                      ^13.3.0  →   ^17.0.1
webpack                          ^3.9.0  →   ^5.75.0
webpack-dev-server              ^2.10.0  →   ^4.11.1

2.升级babel依赖

babel 升级工具修改配置

npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
npm install babel-upgrade -g
babel-upgrade --write

可以看到 package.json 中移除了旧版本的依赖，自动新增了新版名称，.babelrc 文件的配置也会自动修改但是不会删除已有的插件

移除旧版本依赖后重新安装依赖

rm -rf node_modules
npm install

修改所有 bable-polyfill 为 @babel/polyfill

因为 babel 7 新增的 @babel 命名空间，所以原来的 babel-polyfill 需要修改名称

// index.js 头部导入修改
import '@babel/polyfill'

// webpack config 入口修改
entry: ['@babel/polyfill', './src/index.js'],

安装新依赖

mini-csss-extract-plugin 替代 extract-text-webpack-plugin
添加webpack-cli
vue-loader 需在v15（包含）以下

废除项目中的旧包

// 大概的
url-loader
file-loader
vue-style-loader
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
clean-webpack-plugin
webpack-hashed-chunk-id-plugin

`package.json`启动命令修改

webpack-dev-server -> webpack serve

二、plugins及一些依赖使用方式的改变

项目webpack-dev-server升到了4版本用来配套webpack5，所以npm run dev的命令需要相改为webpack serve启动
需要再plugins里面增加VueLoaderPlugin（vue-loader）
extract-text-webpack-plugin和optimize-css-assets-webpack-plugin已经过时了需要由mini-css-extract-plugin和css-minimizer-webpack-plugin来代替
webpack5自带了资源解析，所以不需要什么url-loader,file-loader之类的，直接用assets就可以解析
调整copyWebpackPlugin（copy-webpack-plugin）使用方法
clean-webpack-plugin 废除，是用webpack5自带的 clean 配置
webpack-merge要解构出来，const { merge } = require(‘webpack-merge’)
NamedModulesPlugin已过时，由optimization的moduleIds进行替换
copy-webpack-plugin插件使用方式有变化
devServer改动很多可以参考以上文章链接，自定义参考官网devserver专题
UglifyJsPlugin已经过时，可以直接使用webpack5开箱提供的TerserPlugin
代码拆分webpack.optimize.CommonsChunkPlugin已经过时现在使用webpack5提供的optimization.splitChunks属性来实现功能来实现
build->util.js文件中修改了一处 MiniCssExtractPlugin.loader。ExtractTextPlugin（extract-text-webpack-plugin）已过时，使用MiniCssExtractPlugin（mini-css-extract-plugin）进行替换。
devtool有做一定修改
由于vue-loader升级了，所以之前css如果使用/deep/有可能出错。我是在根节点使用/deep/然后换到::v-deep就正常了。如果有类似问题，可以相应调整。
去掉了vue-style-loader使用style-loader替代。原因css-loader从V4版本开始默认开启esModule，导致css无法被vue-style-loader解析的问题
thread-loader 可以支持替换 HappyPack 用法更简单（但是需要注意兼容性问题）

三、配置文件的更改

代码拆分 webpack.optimize.CommonsChunkPlugin 的替代 optimization.splitChunks

optimization: {
    // 用文件名的 hash 替换打包时候的 ModulesID , 保持 modulesID 不变利于前端持久化
    moduleIds: 'deterministic',
    // 抽取出 webpack 的 runtime 代码，避免稍微修改一下入口文件就会改动 commonChunk ，导致原本有效的浏览器缓存失效
    runtimeChunk: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 用次数大于等于 2 的模块，单独打包
        default: {
          reuseExistingChunk: true,
          minChunks: 2,
          priority: -20,
          filename: webDirName + '/commons/default-[chunkhash:8].js'
        },
        // 将所有 node_modules 中的资源单独打包到 vendors-xxx-xx.js 命名的产物
        defaultVendors: {
          idHint: 'vendors',
          reuseExistingChunk: true,
          test: /[\\/]node_modules[\\/]/i,
          priority: -10,
          filename: webDirName + '/commons/defaultVendors-[chunkhash:8].js'
        }
      }
    }
  }

图片资源 url-loader file-loader 等的替换

// 旧 webpack
{
    test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,
    include: dirConfig.srcDir,
    loader: 'url-loader',
    options: {
        limit: 1024,							// 把小于1kB的文件打成 Base64 的格式，写入 JS
        name: webDirName + '/images/[name].[hash:8].[ext]',	// 放在文件夹的路径及命名
        publicPath: '/',						// 路径上添加两个点指向正确路径,
        cacheDirectory: true
    }
}
// 新 webpack 5
{
    test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,
    include: dirConfig.srcDir,
    type: 'asset',
    generator: {
        filename: webDirName + '/images/[name].[hash:8].[ext]' // 放在文件夹的路径及命名
    },
    parser: {
        dataUrlCondition: {
            maxSize: 1024 // 把小于1kB的文件打成 Base64 的格式，写入 JS
        }
    }
},

copy-webpack-plugin 用法改变

// 旧
new CopyWebpackPlugin([
    {
        from: dirConfig.srcDir + '/temp', // 打包的静态资源目录地址
        to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的css
        flatten: false
    }
])

// 新
new CopyWebpackPlugin({
    patterns: [
        {
            from: 'temp', // 源路径
            to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的css
            context: dirConfig.srcDir // 基础目录
        }
    ]
})

extract-text-webpack-plugin 替换 mini-css-extract-plugin

// 旧
new ExtractTextPlugin(webDirName + '/css/[name]-[contenthash:8].css')
// 新
new MiniCssExtractPlugin({
    filename: webDirName + '/css/[name]-[contenthash:8].css' // 设置导出路径和文件名
})

html-webpack-plugin 添加 chunks

chunks: ['defaultVendors', 'default', 'commons']

添加 mode

mode: 'production' | 'development' | 'none'

eslint-loader 替换为 vscode 的 eslint 实时检查

eslint-loader 是一个 Webpack 插件，赋予其构建时检测代码的功能，但是会影响构建性能

推荐使用，编辑器的 eslint 插件，可以在编辑器中实时检查代码，给出错误和警告提示。这种方式可以帮助开发者在编写代码时及时发现问题，而不需要等待打包过程，不会影响 Webpack 构建性能