本篇記錄一下升級的血淚過程

請注意升級前請先創一個新目錄將升級應用與舊應用隔離

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的更多相关文章

  1. 升級 Centos 6.5 的 php 版本

    升級 Centos 6.5 的 php 版本   待會再看 Centos 6.5 的 php 預設是用 5.3.3 這個版本號 最近想要改用 Laravel 4.1 發現需要 5.3.7 才能用,所以 ...

  2. (转)OS X 升級後 MacPorts 重新安裝筆記

    原地址:http://blog.lyhdev.com/2012/07/os-x-macports.html Mac OS X 10.8 Mountain Lion 正式發佈,而且祭出台幣 $590 元 ...

  3. 在Android中afinal框架下實現sqlite數據庫版本升級的辦法

    public abstract void onUpgrade(SQLiteDatabase db,int oldVersion,int new Version) 這個方法在實現時需要重寫.   pub ...

  4. 使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級

    我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如jQuery.Json.NET. EntityFramework.ELMAH.… 等等.各位可 ...

  5. [笔记] 升級到 Delphi 10.2 Tokyo 笔记

    升級到 Delphi 10.2 Tokyo 笔记: 更新 Xcode 8.3 & iOS 10.3 测试: macOS 没问题(可 Debug) iOS Simulator 没问题(可 Deb ...

  6. 解決從Ubuntu 12.04升級至12.10之後的Unity顯示問題

    FROM: http://blog.sina.com.cn/s/blog_97ef3ff4010190pe.html#bsh-75-306370781 今天中午經過系統自帶的“檢查更新”軟件從Ubun ...

  7. ThinkPad T410i 2516A21 升級手札(換SSD固態硬碟、I7 CPU、開機20秒)

    最近筆記本越來越慢,開機得20分鐘,而且CPU動不動就飆到80度,趁著開學網上活動,準備給老伙計來一次重大升級.查一下主板芯片,最高支持8G內存,已經滿了,光驅位加了一個1T機械硬盤,那麼能升級的就只 ...

  8. ubuntu刪除升級后多余的内核

    列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...

  9. centos6 php5.4 升級到php 5.6

    因Centos6中的PHP版本有点底,需要升级PHP版本 [vagrant@localhost ~]$ php -v PHP 5.4.45 (cli) (built: Sep 30 2015 15:0 ...

随机推荐

  1. 列举Java中常用的包、类和接口

    常用的类: BufferedReader ,BufferedWriter FileReader    ,FileWirter String      ,Integer Date        ,Cla ...

  2. 分布式缓存技术redis学习系列

    分布式缓存技术redis学习系列(一)--redis简介以及linux上的安装以及操作redis问题整理 分布式缓存技术redis学习系列(二)--详细讲解redis数据结构(内存模型)以及常用命令 ...

  3. java代码之美(12)---CollectionUtils工具类

    java代码之美(12)---CollectionUtils工具类 这篇讲的CollectionUtils工具类是在apache下的, 而不是springframework下的CollectionUt ...

  4. ABP框架展示异常信息

    接触ABP框架有一段时间了,也遇到了一些问题,看了官网文档,但是或许是看的不够细致的原因,实际开发中还是遇到了一些问题,耗费了时间去处理,回头一看,原来文档中早已提及. 开发环境:ABP+MPA模式+ ...

  5. ASP.Net Core MVC+Ajax 跨域

    要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...

  6. quillJS 富文本编辑器源码分析系列1

    quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...

  7. 半小时入门Thrift

    当一个单体软件产品体量达到一定程序,都会想到拆分为不同的模块(当今这么流行微服务).拆分后一定会存在进程之间的交互(简称:PRC),那么thrift就是facebook推出一款开源的rpc框架,且还跨 ...

  8. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  9. Asp.Net Core Web应用程序—探索

    前言 作为一个Windows系统下的开发者,我对于Core的使用机会几乎为0,但是考虑到微软的战略规划,我觉得,Core还是有先了解起来的必要. 因为,目前微软已经搞出了两个框架了,一个是Net标准( ...

  10. 安全研究 | Jenkins 任意文件读取漏洞分析

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云鼎实验室 发表于云+社区专栏 一.漏洞背景 漏洞编号:CVE-2018-1999002 漏洞等级:高危 Jenkins 7 月 18 ...