webpack 3.1 升级webpack 4.0

为了提升打包速度以及跟上主流技术步伐，前段时间把项目的webpack 升级到4.0版本以上

webpack 官网：https://webpack.js.org/

正常操作升级webpack

检查node、npm 版本，该升级的升级
卸载webpack 旧版本，安装最新稳定版本 wepack、webpack cli
遇到loader 报错，升级各种loader，其中vue-loader 参考vue loader 官网说明
删除 ExtractTextPlugin插件，改用 MiniCssExtractPlugin
配置各个环境的mode
升级好之后继续优化，比如 gzip、happlyPack、dllplugin等等优化手段
等等

通常上面的报错很容易找到解决方案

碰到的问题

1、安装了babel 最新版，但是一直提示加载的是之前的版本，babel 一直报错

通常这是因为之前babel 卸载的不完整导致的，先把babel 相关的插件全都卸载，然后在安装新版本的插件。

2、在路由index中提示组件加载失败或者提示路由动态加载模块失败

dynamic-import-webpack

完整babel 配置如下

{"presets": ["@babel/preset-env"],// "presets": [//   ["env", {//     "modules": false,//     "useBuiltIns": "entry"//   }],//   "@babel/preset-env"// ],"plugins": [["@babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": false,"helpers": true,"regenerator": true,"useESModules": false}],"@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx","dynamic-import-webpack",["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]],"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["istanbul"]}}
}

3、Babel 7+使用babel-plugin-transform-vue-jsx报错的解决方法

"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx"
]

4、webpack 最好是看官网，webpakc 中文网并没有完全同步过来。

5、最新的babel 插件都是在@babel/ 名称空间下

效果

很多loader、插件都升级到了最新版，在未升级之前发一次测试环境要7分钟以上。升级之后发一次测试环境大概2分钟到3分钟左右。这次升级主要还是为了vue3.0，哈哈。希望赶紧来吧vue3.0。

转载于:https://www.cnblogs.com/CandyManPing/p/11075042.html

webpack 3.1 升级webpack 4.0相关推荐

git 创建webpack项目_一次create-react-app创建项目升级webpack的流水账
不再赘述为什么要升级webpack4,有兴趣的小伙伴可以看一下知乎:如何评价webpack4 下面撸起袖子开干: 克隆项目,新建分支 git checkout -b feature_webpack_ ...
Webpack 5 配置手册（从0开始）
webpack安装顺序 1. `npm init -y`,初始化包管理文件 package.json 2. 新建src源代码目录 3. 新建index.html 4. `yarn add webpac ...
安装truffle的前提条件（nodejs和npm），truffle的webpack案例测试，webpack项目中的报错
truffle安装 Ubuntu20.04下truffle相关组件版本如下: Truffle v5.2.4 (core: 5.2.4) Solidity v0.5.16 (solc-js) Node ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
web3.0 升级到webpack5.0 以及兼容IE处理
如果你的事vue-cli 或者其他cli 关于IE 兼容不具有什么参考价值.如果是react 项目,你看看就行. webpack3的打包速度已成为诟病,所以我们将原来的webpack3升级至webp ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
webpack笔记一：webpack的介绍，安装，加载css、图片、字体等
写在前面的话: 在当前grunt.gulp.webpack成为日常工具的情况下,如果你还只是熟练的使用html.css和激块瑞的话,已经远远不能满足项目的需求,所以你得变强,你需要懂得更多.现在前端不 ...
Webpack是什么？Webpack有什么应用？
Webpack是什么? Webpack核心定义--Webpack是一个模块打包工具.最早的时候,Webpack是一个JS打包工具,现在Webpack功能日益强大,除了JS还可以打包CSS或者图片等多种 ...

webpack 3.1 升级webpack 4.0

webpack 3.1 升级webpack 4.0

正常操作升级webpack

碰到的问题

1、安装了babel 最新版，但是一直提示加载的是之前的版本，babel 一直报错

2、在路由index中提示组件加载失败或者提示路由动态加载模块失败

3、Babel 7+使用babel-plugin-transform-vue-jsx报错的解决方法

4、webpack 最好是看官网，webpakc 中文网并没有完全同步过来。

5、最新的babel 插件都是在@babel/ 名称空间下

效果

webpack 3.1 升级webpack 4.0相关推荐

最新文章

热门文章