shop在webpack4的升級過程被HMR問題卡了很久们镜，最近終于解決，有時(shí)間重新梳理并對升級過程踩的坑做下筆記。
- 把webpack僧免、webpack-dev-middleware俭缓、webpack-dev-server克伊、webpack-hot-middleware都升級到最新版本。
npm install webpack webpack-dev-middleware webpack-dev-server webpack-hot-middleware --save-dev
- 升級loaders华坦，修改webpack loader的rules配置結(jié)構(gòu)愿吹，從webpack2開始loader已經(jīng)全部改成了rules的寫法。
npm install bundle-loader css-loader file-loader less-loader postcss-loader sass-loader style-loader url-loader postcss-modules-values less precss base64-loader
mode: 'development',
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/
}
...
]
- 重新打包Dll惜姐。
- 增加webpack mode配置犁跪。
- postcss的配置從webpack配置里放到了單獨(dú)的文件postcss.config.js。
- 去除OccurenceOrderPlugin歹袁、DedupePlugin和CommonsChunkPlugin等插件坷衍。
- ExtractTextWebpackPlugin調(diào)整，選用新的CSS文件提取插件mini-css-extract-plugin宇攻。
- fs.walk在fs-extra 2.0.0以后移除惫叛，換成klaw。
- res.send(status, content) => res.status(status).send(content)
webpack 4取消了四個(gè)常用的用于性能優(yōu)化的plugin（UglifyjsWebpackPlugin逞刷，CommonsChunkPlugin嘉涌，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin）夸浅，轉(zhuǎn)而提供了一個(gè)名為optimization的配置項(xiàng)仑最，用于接手以上四位的工作。在webpack4帆喇，我們熟悉的CommonsChunkPlugin被splitChunks取代警医，另外runtimeChunk用于分開打包runtime。DllPlugin因?yàn)闊o法應(yīng)用tree shaking坯钦，一般服務(wù)于develop環(huán)境预皇。shop可以考慮優(yōu)化成production環(huán)境使用splitChunks和runtimeChunk，develop環(huán)境使用DllPlugin婉刀。
- 升級babel8
npm uninstall babel-core babel-eslint babel-loader babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-object-rest-spread babel-plugin-transform-omodule-variable babel-polyfill babel-preset-env babel-preset-react babel-preset-react-hmre --save-dev
npm i @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-export-default-from @babel/plugin-proposal-export-namespace-from @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime babel-eslint babel-loader babel-plugin-dynamic-import-node babel-plugin-syntax-dynamic-import babel-plugin-transform-omodule-variable --save-dev
修改babel配置
{
"presets": ["@babel/preset-react",
[
"@babel/preset-env",
{
"loose": true
}
]
],
"plugins": [
"transform-omodule-variable",
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-transform-runtime",
["react-hot-loader/babel"],
["@babel/plugin-syntax-dynamic-import"]
]
}
enable inline javascript for less-loader
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}
]
}
- It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'bundle-loader' instead of 'bundle'
按提示解決了一些小問題吟温，這時(shí)候項(xiàng)目應(yīng)該可以跑起來了。接下來說說HMR的解決方案突颊。HMR之所以會出問題是因?yàn)閛module的require.context涉及到code splitting鲁豪，更新之后的hot-update過程中潘悼，動態(tài)加載的組件不知道怎么刷新自己導(dǎo)致的。按照react-hot-loader的文檔給組件包上RHL friendly的兼容庫（例如 Loadable Components）之后還是無法解決爬橡。幾經(jīng)周折治唤，最后嘗試出在所有動態(tài)分割的組件加上hot方法：
- babel-preset-react-hmre => react-hot-loader
- require => import，RHL just support hot import component
- '../../configs/' + props.productId + '.js' =>
../../configs/${props.productId}.js- getComponent =>component (async)
- route.js里糙申，對每個(gè)component包上hot方法
process-update.js:22 Ignored an update to unaccepted module ./node_modules/babel-loader/lib/index.js!./src/omodules/one-page-insurance/pages/OnePageDetail.js -> ./node_modules/bundle-loader/index.js!./src/omodules/one-page-insurance/pages/OnePageDetail.js -> ./src/omodules/one-page-insurance/route.js -> ./src/omodules/one-page-insurance/omodule.js -> ./src sync recursive ^\.\/omodules\/((?!\/)[\s\S])+\/omodule\.js$ -> ./src/omodule.js -> ./src/root/store/configureStore.dev.js -> ./src/root/store/configureStore.js -> ./src/root/index.js -> 0
onUnaccepted @ process-update.js:22
hotApply @ bootstrap:502
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
process-update.js:95 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
/**
* omodule 描述文件
* 大多數(shù)情況不需要修改該文件宾添。新建一個(gè)模塊，復(fù)制粘貼該文件即可
* {
* route,
* reducer, //一個(gè)omodule模塊可以沒有reducer
* childOmodules
* }
*
*/
import { hot } from 'react-hot-loader/root'
export const namespace = __omodule_namespace
const routes = require('./route').default
routes.childRoutes = routes.childRoutes.map(({ path, component }) => {
return {
path,
component: hot(component)
}
})
const omodule = {
route: routes,
// 異步reducer寫法：
// 一般情況下都推薦用異步reducer郭宝，
// 只有當(dāng)進(jìn)入該omudle模塊下的路由時(shí)異步reducer才會被加載
//
reducer: cb => {
import('./reducer/index.js').then(function(reducerFun) {
const reducer = {}
reducer[namespace] = reducerFun.default
cb(null, reducer)
})
},
// 同步reducer寫法： 整個(gè)項(xiàng)目初始化就會加載該reducer
//
// reducer: {
// [`${namespace}`]: require('./reducer').default
// },
childOmodules: (r => {
return r.keys().map(key => r(key).default)
})(require.context('./', true, /^\.\/omodules\/((?!\/)[\s\S])+\/omodule\.js$/))
}
export default omodule
升級過程中發(fā)現(xiàn)webpack由4.23升級到4.29之后會報(bào)錯(cuò)辞槐，缺少解析動態(tài)import的loader，應(yīng)該是plugin-syntax-dynamic-import不兼容4.29的webpack粘室，回退到4.23。
HMR參考資料
https://github.com/gaearon/react-hot-loader
https://github.com/gaearon/react-hot-boilerplate
https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md
https://webpack.docschina.org/guides/hot-module-replacement
https://github.com/gaearon/react-hot-loader/issues/288
https://github.com/gaearon/react-hot-loader/issues/249
其他
https://github.com/jprichardson/node-fs-extra/issues/338
https://segmentfault.com/a/1190000005614604
http://www.voidcn.com/article/p-sfoxvjwp-bbs.html
http://acgtofe.com/posts/2016/02/full-live-reload-for-express-with-webpack
https://zhuanlan.zhihu.com/p/35407642
