vue2项目从webpack3升级到webpack4过程全记录以及多页面打包

最新推荐文章于 2024-06-25 10:57:16 发布

haoyanyu_

最新推荐文章于 2024-06-25 10:57:16 发布

阅读量987

点赞数 1

分类专栏： js Vue

本文链接：https://blog.csdn.net/haoyanyu_/article/details/97643820

版权

本文详细记录了将Vue2项目从Webpack3迁移到Webpack4的全过程，包括升级Babel到7.x，修改Webpack配置如新增mode属性，替换css处理插件，调整公共代码提取方式，以及Vue-loader的更新。此外，还介绍了如何将单页面项目改为多页面项目，主要涉及entry入口和html-webpack-plugin的配置调整。

摘要由CSDN通过智能技术生成

升级各种插件，尤其是babel系列，从6升级到了7

babel7系列的安装大多是@babel/开头，至少需要安装以下插件

	"@babel/core": "^7.4.5", //核心包
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5", //
    "@vue/babel-plugin-transform-vue-jsx": "^1.0.0",
    //dependencies
    "@babel/runtime": "^7.5.5",
    "@babel/runtime-corejs2": "^7.5.5",

.babelrc文件配置修改为如下：
不再有stage-*的配置

{
   
  "presets": [
    [
      "@babel/preset-env", {
   
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
   
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
		"corejs": 3
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-syntax-dynamic-import"],
    ["@babel/plugin-transform-runtime"],
    ["@vue/babel-plugin-transform-vue-jsx"],