AngularJs with Webpackv1 升級到 Webpack4
本篇記錄一下升級的血淚過程
請注意升級前請先創一個新目錄將升級應用與舊應用隔離
1. 需要將相關的套件做統一升級的動作,已確認需要升級所有舊的loaders
其它應用的套件可先不做升級的動作 (如果編譯錯誤時,依照出錯的模塊到github做查找的動作)
2. 需要手動將 webpack1 的config檔重寫為 webpack4
https://webpack-gatsby.netlify.com/how-to/upgrade-from-webpack-1/ 請參考本篇
總結幾個需要特別注意的地方
1. loader 的寫法已經完全不一樣了,請依照新的寫法將原本的loader設定區段移到module.rules[]裡
2. CommonsChunkPlugin 已經被取代了,請重新研究 optimize.splitChunks的用法
https://webpack.js.org/plugins/split-chunks-plugin/
3. production與dev環境上的設定檔,務必設置對應的mode參數值會比較好(如果沒特別設置預設為production),在webpack4中mode設置為 production 預設會開啟效能調整
其它注意事項
1. eslint-loader 會去讀取 options , 所以在新的設定檔中需要多加入這段
new webpack.LoaderOptionsPlugin({ options: {} })
https://github.com/webpack/webpack/issues/6556
2. 注意一下output 是否有設定 publicPath
https://github.com/webpack/webpack/issues/3242
3. node-sass 安裝異常
npm --add-python-to-path='true' --debug install --global windows-build-tools
npm install --global node-gyp
4. postcss-loader 重新設置
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')({
'browsers': ['> 1%', 'last 2 versions']
})],
}
}
升級參考文章
https://github.com/postcss/postcss-loader
sample config file : https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
https://stackoverflow.com/questions/49782806/webpack-4-postcss-loader-and-autoprefixer-plugin
bundle vendor
https://webpack.js.org/guides/caching/
https://webpack.js.org/plugins/split-chunks-plugin/ chunk 設定
https://webpack.js.org/guides/code-splitting/ 模組切分參考
https://webpack-gatsby.netlify.com/how-to/upgrade-from-webpack-1/
https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
AngularJs with Webpackv1 升級到 Webpack4的更多相关文章
- 升級 Centos 6.5 的 php 版本
升級 Centos 6.5 的 php 版本 待會再看 Centos 6.5 的 php 預設是用 5.3.3 這個版本號 最近想要改用 Laravel 4.1 發現需要 5.3.7 才能用,所以 ...
- (转)OS X 升級後 MacPorts 重新安裝筆記
原地址:http://blog.lyhdev.com/2012/07/os-x-macports.html Mac OS X 10.8 Mountain Lion 正式發佈,而且祭出台幣 $590 元 ...
- 在Android中afinal框架下實現sqlite數據庫版本升級的辦法
public abstract void onUpgrade(SQLiteDatabase db,int oldVersion,int new Version) 這個方法在實現時需要重寫. pub ...
- 使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級
我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如jQuery.Json.NET. EntityFramework.ELMAH.… 等等.各位可 ...
- [笔记] 升級到 Delphi 10.2 Tokyo 笔记
升級到 Delphi 10.2 Tokyo 笔记: 更新 Xcode 8.3 & iOS 10.3 测试: macOS 没问题(可 Debug) iOS Simulator 没问题(可 Deb ...
- 解決從Ubuntu 12.04升級至12.10之後的Unity顯示問題
FROM: http://blog.sina.com.cn/s/blog_97ef3ff4010190pe.html#bsh-75-306370781 今天中午經過系統自帶的“檢查更新”軟件從Ubun ...
- ThinkPad T410i 2516A21 升級手札(換SSD固態硬碟、I7 CPU、開機20秒)
最近筆記本越來越慢,開機得20分鐘,而且CPU動不動就飆到80度,趁著開學網上活動,準備給老伙計來一次重大升級.查一下主板芯片,最高支持8G內存,已經滿了,光驅位加了一個1T機械硬盤,那麼能升級的就只 ...
- ubuntu刪除升級后多余的内核
列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...
- centos6 php5.4 升級到php 5.6
因Centos6中的PHP版本有点底,需要升级PHP版本 [vagrant@localhost ~]$ php -v PHP 5.4.45 (cli) (built: Sep 30 2015 15:0 ...
随机推荐
- 你可能忽略的js类型转换
前言 相信刚开始了解js的时候,都会遇到 2 == '2',但 1+2 == 1+'2'为false的情况.这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这么猝不及 ...
- 前端性能优化 —— 添加Expires头与Cache-control区别
要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本, ...
- TIMO后台管理系统-基于SpringBoot开发
项目介绍 TIMO后台管理系统,基于SpringBoot2.0 + Spring Data Jpa + Thymeleaf + Shiro 开发的后台管理系统,采用分模块的方式便于开发和维护,支持前后 ...
- Navicat:实现两个数据库结构同步和数据库对比
Navicat版本:Navicat Premium 12 选择 工具 ——> 结构同步 选择源数据库和目标数据库,选择完成后点击右下角对比按钮 要修改的对象:源数据库和目标数据库中都有的 ...
- RabbitMQ的介绍及使用进阶(Docker+.Net Core)
目录: 一.什么是RabbitMQ 二.RabbitMQ运用场景 三.RabbitMQ优势及特点 四.Centos7中Docker安装RabbitMQ 五..Net Core 中使用RabbitMQ ...
- 《前端之路》 之 前端 安全 XSS 原理以及防御手段
什么是 XSS 一.XSS 什么是 XSS XSS,即 Cross Site Script , 翻译过来就是 跨站脚本攻击:为了和 css 有所区分,因而在安全领域被称为 XSS. 什么是 XSS 攻 ...
- [深度应用]·实战掌握Dlib人脸识别开发教程
[深度应用]·实战掌握Dlib人脸识别开发教程 个人网站--> http://www.yansongsong.cn/ 项目GitHub地址--> https://github.com/xi ...
- 带你搭一个SpringBoot+SpringData JPA的环境
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家对SpringBoot和Spring Da ...
- kubernetes实践之三:深入理解Pod对象
一.Pod定义 最小部署单元 一组容器集合 一个pod中的容器共享网络命名空间 Pod是短暂的 二.Pod容器分类 基础容器 维护整个Pod的网络命名空间 初始化容器 先于业务容器开始执行,在应用启动 ...
- python之循序渐进学习装饰器
python装饰器的定义:在代码运行期间在不改变原函数定义的基础上,动态给该函数增加功能的方式称之为装饰器(Decorator) 装饰器的优点和用途: 1. 抽离出大量函数中与函数功能本身无关的的雷同 ...