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

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

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. 你可能忽略的js类型转换

    前言 相信刚开始了解js的时候,都会遇到 2 == '2',但 1+2 == 1+'2'为false的情况.这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这么猝不及 ...

  2. 前端性能优化 —— 添加Expires头与Cache-control区别

    要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本, ...

  3. TIMO后台管理系统-基于SpringBoot开发

    项目介绍 TIMO后台管理系统,基于SpringBoot2.0 + Spring Data Jpa + Thymeleaf + Shiro 开发的后台管理系统,采用分模块的方式便于开发和维护,支持前后 ...

  4. Navicat:实现两个数据库结构同步和数据库对比

    Navicat版本:Navicat Premium 12 选择 工具 ——> 结构同步 ​ 选择源数据库和目标数据库,选择完成后点击右下角对比按钮 ​ 要修改的对象:源数据库和目标数据库中都有的 ...

  5. RabbitMQ的介绍及使用进阶(Docker+.Net Core)

    目录: 一.什么是RabbitMQ 二.RabbitMQ运用场景 三.RabbitMQ优势及特点 四.Centos7中Docker安装RabbitMQ 五..Net Core 中使用RabbitMQ ...

  6. 《前端之路》 之 前端 安全 XSS 原理以及防御手段

    什么是 XSS 一.XSS 什么是 XSS XSS,即 Cross Site Script , 翻译过来就是 跨站脚本攻击:为了和 css 有所区分,因而在安全领域被称为 XSS. 什么是 XSS 攻 ...

  7. [深度应用]·实战掌握Dlib人脸识别开发教程

    [深度应用]·实战掌握Dlib人脸识别开发教程 个人网站--> http://www.yansongsong.cn/ 项目GitHub地址--> https://github.com/xi ...

  8. 带你搭一个SpringBoot+SpringData JPA的环境

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家对SpringBoot和Spring Da ...

  9. kubernetes实践之三:深入理解Pod对象

    一.Pod定义 最小部署单元 一组容器集合 一个pod中的容器共享网络命名空间 Pod是短暂的 二.Pod容器分类 基础容器 维护整个Pod的网络命名空间 初始化容器 先于业务容器开始执行,在应用启动 ...

  10. python之循序渐进学习装饰器

    python装饰器的定义:在代码运行期间在不改变原函数定义的基础上,动态给该函数增加功能的方式称之为装饰器(Decorator) 装饰器的优点和用途: 1. 抽离出大量函数中与函数功能本身无关的的雷同 ...