easywebpack
基于 Webpack 前端工程构建方案

升级指南

easywebpack - 基于 Webpack 前端工程构建方案, 支持 Webpack Vue, React, Weex, JS, Weex等多种前端框架构建, 包括 Webpack Vue SSR, Webpack React SSR 构建。
Date:  2019-10-20
Word Count:  1.1k
Read Times:  4 Min
Read Count: 

Webpack 3 到 Webpack 4 经过重大更新，对应 easwebpack3 到 easywebpack4 也有相对性的更新，主要包括以下3点：

  • Webpack 版本升级导致的配置优化和优化修改

  • easywebpack 新特性支持和配置简化

  • easywebpack 遗留问题修复以及去掉历史兼容 hack 代码

一键升级

最新 easywebpack-cli 提供一键升级命令： easy upgrade 主要升级 easywebpack 相关解决方案插件和 Webpack 相关第三方插件， 部分配置需要先确认，然后手动修改。 如果是 Egg 项目请运行 easy upgrade --egg

依赖升级

easywebpack3 easywebpack4 升级方式
easywepback@3.x.x easywepback@4.x.x easy upgrade
easywepback-vue@3.x.x easywepback-vue@4.x.x easy upgrade
easywepback-react@3.x.x easywepback-react@4.x.x easy upgrade
easywebpack-js@3.x.x easywebpack-html@4.x.x easy upgrade
easywebpack-html@3.x.x easywebpack-js@4.x.x easy upgrade
webpack-tool@3.x.x webpack-tool@4.x.x easy upgrade
webpack-manifest-resource-plugin@2.x.x webpack-manifest-resource-plugin@4.x.x easy upgrade

依赖修改

项目package.json 文件依赖修改

easywebpack3 easywebpack4 升级方式
项目依赖 autoprefixer easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-core easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-loader easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-eslint easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 postcss-loader easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 eslint-loader easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 html-webpack-plugin easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
​项目依赖 html-webpack-plugin ​easywebpack方案依赖，项目package.json 无需显示依赖 ​easy upgrade
项目依赖 directory-named-webpack-plugin ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 progress-bar-webpack-plugin ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 uglifyjs-webpack-plugin ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 webpack-manifest-resource-plugin ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 server-side-render-resource ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 vue-template-compiler ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 vue-server-renderer ​easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-add-module-exports easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-syntax-dynamic-import easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-transform-object-assign easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-transform-object-rest-spread easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-transform-runtime easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-preset-env easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade
项目依赖 babel-plugin-import easywebpack方案依赖，项目package.json 无需显示依赖 easy upgrade

webpack.config.js 配置修改

easywebpack3 easywebpack4 修改说明 升级方式
plugins.buildfile 不需要，移除该配置 配置简化 如有，暂手动修改
plugins.manifest 不需要，移除该配置 配置简化 如有，暂手动修改
plugins.manifestDeps 不需要，移除该配置 配置简化 如有，暂手动修改
cache: true compile:{
thread: true, // 多进程编译
cache: true // 启动编译缓存
}		 配置增强
4.9.0 已默认开启		 如有，请暂手动修改
https://www.yuque.com/hubcarl/easywebpack/speed
cssModule:{
include: [‘src/page/css’]
}		 依然支持3的方式，但可以简化
- 把 css module 的 样式文件改成 /.module(css		 less scss

- easywebpack4 默认提供
/.module.(css		 less scss stylus)/ 的文件规范的 CSS Module 特性

配置简化 如有，请暂手动修改
cdn:UPLOAD_CDN ? { url: ‘http://xxx.cdn.com/public/' }: {},
- 无需通过变量控制是否配置 CDN地址，开发模式即使配置不起作用，只有在 test 和 prod 构建模式才起作用

- 配置无需配置 Object 类型，可以直接配置一个 CDN的 URL 地址，也就是支持同时String

配置简化 如有，请暂手动修改

版本说明

Author: sky
Link: https://easyjs.cn/easywebpack/upgrade/
yuque: https://yuque.com/easy-team/easywebpack/upgrade/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
deploy deploy
打包配置支持 webpack.config.js 文件配置 和  easyweback-cli 模式,  easywebpack-cli@4.3.2 开始支持。注意打部署包时, 如果把 node 和 alinode 打进依赖包里面，请保证打包机器操作系统与线上运行的操作系统...
2019-10-20 sky
Next 
极速编译 极速编译
DLL 公共提取Webpack 通过 DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取，能极大大提升了构建的速度.只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。module.exports = { dll:['vue','vuex','axios'] } 详细方案：Webpack DLL 工程化实现开启 cache-loader...
2019-10-20 sky