vue-webpack4升级

本文介绍如何将基于Vue的项目从Webpack3升级到Webpack4,包括更新依赖包、替换extract-text-webpack-plugin为mini-css-extract-plugin、添加webpack-cli及调整配置等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-webpack3x - > webpack4x

  • 先在原来的项目里升级所有的依赖包

npm update
  • 相比webpack3x webpack4x需要多安装一个webpack-cli

npm install webpack-cli
  • 原来删除的extract-text-webpack-plugin使用mini-css-extract-plugin替代

// 使用yarn

yarn remove extract-text-webpack-plugin

yarn add --dev mini-css-extract-plugin

// webpack3x

const ExtractTextPlugin = require('extract-text-webpack-plugin');
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    allback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}
// 改为
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
if (options.extract) {
  return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders)
}

// webpack.prod.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[contenthash].css')
})
// 改为
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[contenthash].css')
})
  • webpack.base.conf.js

// 在入口之前 添加 新版webpack强制要求添加,不添加也可以执行,会有警告
module.exports = {
  mode: process.env.NODE_ENV, // development || production || none
  ...
}
  • 针对找不到eslint的报错

// 在webpack.dev.conf.js 和 webpack.prod.conf.js 中的plugins下 添加(只是单纯的添加) 如下配置
new webpack.LoaderOptionsPlugin({ options: {} })
  • 由于新版webpack不支持CommonsChunkPlugin所以需要把相关配置进行换换
new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

// 把上面的删除了  --- 然后在 plugins 的同级 添加

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
}

// 后面的这个配置如果配置有误会提示 ERROR in chunk 【你的多页面模块名】 [entry] 报错
  • 安装插件

// 针对代码压缩报错

yarn add --dev uglifyjs-webpack-plugin

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: true
})

// 改为

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    }
    },
    sourceMap: true
})

参考资料:

webpack中文网:https ://www.webpackjs.com/
npm官网:https://www.npmjs.com/ 查看新安装的包的使用方法
其他博客:...

### Vue2 项目从 Webpack4 升级Webpack5 的指南 #### 准备工作 确保开发环境中安装了 Node.js 和 Yarn 或 npm。对于升级来说,重要的是确认当前项目的 `package.json` 文件中的依赖项版本兼容新版本的 Webpack。 #### 修改 package.json 中的相关依赖 更新 `package.json` 文件内的相关依赖来匹配 Webpack 5 版本的要求[^2]。这通常涉及以下几个方面: - **Webpack**: 将其版本号设置为最新稳定版。 - **Webpack CLI**: 同样应被更新至与 Webpack 主版本相适应的新版本。 - **其他插件和加载器**:任何特定于旧版本 Webpack 的插件或加载器也需要评估并可能需要替换或移除不支持的功能。 ```json { "devDependencies": { "webpack": "^5.0.0", "webpack-cli": "^4.0.0" } } ``` 执行命令以实际完成这些包的更新操作: ```bash yarn upgrade webpack@latest --depth=Infinity yarn add webpack-dev-server webpack-cli -D ``` #### 处理 Breaking Changes Webpack 5 引入了一些破坏性的更改,因此需要注意以下几点调整[^3]: - 移除了对某些废弃 API 的支持; - 默认情况下不再 polyfill 过去自动引入的一些模块(如 process, Buffer),如果应用程序仍然依赖它们,则需显式声明; 可以在 `webpack.config.js` 添加如下配置解决默认行为变化带来的问题: ```javascript const { definePlugin } = require('webpack'); module.exports = { plugins: [ new DefinePlugin({ 'process.env': JSON.stringify(process.env), }), ], }; ``` 另外,在 `.babelrc` 或者 Babel 配置文件里加入 `env` 插件可以处理不同环境下的差异性需求。 #### 测试与优化 每次修改后都应该重新启动服务测试应用是否正常运行,并且关注控制台输出是否有警告信息提示潜在的问题。随着 Webpack 5 性能上的改进,应该也会注意到构建速度有所加快[^4]。 通过以上步骤能够帮助顺利完成从 Webpack 4Webpack 5 的迁移工作,同时享受新版编译工具所带来的性能增益和其他特性增强。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值