webpack frames下載 - webpack frames源代碼下載

webpack frames

其他類別

1.0.0

下載

Badge

check && format
webpack1-ie8
webpack3-react
webpack3-vue
webpack4-react
webpack4-vue

更新說明

webpack4-vue和webpack3-vue包含的文件夾完全一致,有需要請自行複制
webpack4-react和webpack3-react包含的文件夾完全一致,有需要請自行複制
webpack2和3差異很小,基本上直接3替換2也沒問題,這裡只討論版本1/3/4,官方遷移文檔
開發環境已經做了熱重載,若想開發環境兼容ie11以下,請清除熱重載
- 文件.babelrc的plugins中移除react-hot-loader/babel
- package.json的devDependencies中移除react-hot-loader
- config/opt.dev.js中devServer.inline必須為false(vue只需修改這一處)
- 代碼中移除react-hot-loader
開發環境已經支持前端mock api ,會自動讀取src/mock下的文件,並進行熱更新,代碼邏輯在config/mock.js , 其中有example示例
vue和vue-template-compiler版本必須完全一致,否則有不可預見錯誤
config目錄webapck134,react,vue配置已統一,不同項目僅需改opt.self.js即可
readme說明有遺漏,麻煩移駕到文件中看代碼註釋,關鍵點在config目錄中的文件均有註釋和官方參考文檔地址
devDependencies被用來放鎖版本的依賴了, dependencies是保持最新的依賴;由於不用發佈到npm上,因此這個分類比較隨意,甚至說是錯誤的;若要發布,請做好區分,具體細節谷歌百度找文檔
由於DllPlugin和CommonsChunkPlugin或splitChunks存在功能重複,而且前者需前置執行一次webpack命令,另外可以用externals來簡單替代,後者可操作的空間大,可以自由拆包,使文件大小更均勻,故後續將不再使用DllPlugin

環境準備工作

設置淘寶鏡像npm config set registry https://registry.npm.taobao.org
管理員身份運行npm i -g npminstall
命令行進入當前目錄,運行npminstall -c
若出現報錯,常用解決辦法如下:
- 管理員身份運行npm cache clean -f和npm cache verify -f
- 刪除node_modules目錄
- 重新運行npminstall -c
- 最後換一個好點的網絡,升級node和npm
使用注意:
- npminstall -c和npm install不兼容,前者比後者快很多,但是不能混著用
- 切換使用需要刪除node_modules文件夾
- node-v12.0.0有問題請先別升級, node-v12的最新版已經沒有問題
- 偶爾出現莫名其妙的打包錯誤或代碼錯誤,刪除node_modules重試

開發壞境啟動

npm start
- 需要支持ie 時請用
- npm run env -- FOR_IE=1 npm start
瀏覽器打開http://localhost:8888

生產壞境部署

npm run app
- 需要支持ie 時請用
- npm run env -- FOR_IE=1 npm run app
拷貝dist 文件夾內容至服務器即可

新增其它功能

npm run report查看生產包bundle 組成
- 需要支持ie 時請用
- npm run env -- FOR_IE=1 npm run report
npm run debug新增斷點調式啟動,端口7777
- 需要支持ie 時請用
- npm run env -- FOR_IE=1 npm run debug

更新package.json

安裝npm i -g npm-check-updates
在package.json目錄執行ncu (查看) ncu -u (更新)

使用react-hot-loader 熱重載

官方文檔

package.json的devDependencies中加入react-hot-loader
webpack.cfg.dev.js的devServer.inline一定要為true
.babelrc的plugins中加入react-hot-loader/babel
啟動命令增加--hot , 勿同時使用HotModuleReplacementPlugin
export根組件加修飾,並且在react前引入react-hot-loader

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

注: 僅4.3.12支持ie8+react@0 ,且需要一個小變更,已在腳本內完成

圖片處理

普通圖片=> https://tinypng.com图片压缩=> url-loader (4kb以下)
svg圖片=> https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 支持ie8 研究

DllPlugin 打包後的代碼未經過轉換, 極大可能存在不兼容問題, 因此打包速度無法較大提升
hot reload 原理是Object.defineProperty, ie8 不支持
無法使用最新react/antd, [email protected]/[email protected] 才支持ie8; vue直接就不支持ie8
至此webpack 3 4 的一些優勢近乎都不支持, 暫不考慮webpack 3 4, 而且網上版本的兼容性都不是很好
如果實在想用webpack 3 4 兼容ie8, 以下一些提供參考, 但未做測試(應該是都有問題)
- https://github.com/ediblecode/webpack4-ie8
- https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md