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 ...
随机推荐
- 列举Java中常用的包、类和接口
常用的类: BufferedReader ,BufferedWriter FileReader ,FileWirter String ,Integer Date ,Cla ...
- 分布式缓存技术redis学习系列
分布式缓存技术redis学习系列(一)--redis简介以及linux上的安装以及操作redis问题整理 分布式缓存技术redis学习系列(二)--详细讲解redis数据结构(内存模型)以及常用命令 ...
- java代码之美(12)---CollectionUtils工具类
java代码之美(12)---CollectionUtils工具类 这篇讲的CollectionUtils工具类是在apache下的, 而不是springframework下的CollectionUt ...
- ABP框架展示异常信息
接触ABP框架有一段时间了,也遇到了一些问题,看了官网文档,但是或许是看的不够细致的原因,实际开发中还是遇到了一些问题,耗费了时间去处理,回头一看,原来文档中早已提及. 开发环境:ABP+MPA模式+ ...
- ASP.Net Core MVC+Ajax 跨域
要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...
- quillJS 富文本编辑器源码分析系列1
quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...
- 半小时入门Thrift
当一个单体软件产品体量达到一定程序,都会想到拆分为不同的模块(当今这么流行微服务).拆分后一定会存在进程之间的交互(简称:PRC),那么thrift就是facebook推出一款开源的rpc框架,且还跨 ...
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- Asp.Net Core Web应用程序—探索
前言 作为一个Windows系统下的开发者,我对于Core的使用机会几乎为0,但是考虑到微软的战略规划,我觉得,Core还是有先了解起来的必要. 因为,目前微软已经搞出了两个框架了,一个是Net标准( ...
- 安全研究 | Jenkins 任意文件读取漏洞分析
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云鼎实验室 发表于云+社区专栏 一.漏洞背景 漏洞编号:CVE-2018-1999002 漏洞等级:高危 Jenkins 7 月 18 ...