前言
webpack4正式版发布也有一段时间了,为了从实际中感受变化,于是以typescript,react,结合之前翻译的一篇文章webpack-4.0更新日志（翻译）,搭建一个可供项目使用的框架.
项目状况
github
项目已使用
- webpack-4
- typescript
- react
- react-router-4
- component hot reload
- async component
- import .(s)css auto generate .(s)css.d.ts
- svg icon
- Mobx
- Antd
主要库及版本
- webpack --------- 4.1.1
- typescript --------- 2.9.2
- react ------------ 16.3.2
- react-router-dom -- 4.2.2
- react-hot-loader --- 4.2.0
- ......
- node ------------- 8.11.2
原配置:
// tsconfig.json
{
"compilerOptions": {
"target": "es5","module": "es2015","moduleResolution": "node",....
}
}
// webpack.config.js
{
test: /\.(ts(x?)|js(x?))$/,exclude: /node_modules/,rules: [
{
loader: 'react-hot-loader/webpack',},{
loader: 'ts-loader',options: {
transpileOnly: true
}
}
}
Module not found: Error: Can't resolve 'react-hot-loader/webpack' in '/Users/jackple/Documents/react/ts-react-webpack4'
果然跑不通,符合心理预期!????
查看node_modules里面的react-hot-loader,对比原项目node_modules的react-hot-loader,文件结构改了不少,看4.0.0的源码,也不再有webpack目录,而且代码中有这么一段:
throw new Error('React Hot Loader: You are erroneously trying to use a Babel plugin ' + 'as a Webpack loader. We recommend that you use Babel,' + 'remove "react-hot-loader/babel" from the "loaders" section ' + 'of your Webpack configuration,and instead add ' + '"react-hot-loader/babel" to the "plugins" section of your .babelrc file. ' + 'If you prefer not to use Babel,replace "react-hot-loader/babel" with ' + '"react-hot-loader/webpack" in the "loaders" section of your Webpack configuration. ');
提示信息与实际不符,估计提示没改过来,还是用babel吧(其实它的README也是建议用babel),免得挣扎!
按照react-hot-loader官方推荐做法以及demo
When using TypeScript,Babel is not required,but React Hot Loader will not work without it. Just add babel-loader into your Webpack configuration,with React Hot Loader plugin.
{
test: /\.tsx?$/,use: [
{
loader: 'babel-loader',options: {
babelrc: true,plugins: ['react-hot-loader/babel'],'ts-loader',// (or awesome-typescript-loader)
],}
You also have to modify your tsconfig.json:
// tsconfig.json
{
"module": "commonjs","target": "es6"
}
// xxx.tsx
import { hot } from 'react-hot-loader'
...
export default hot(module)(Component)
... default = i,u = r(4). default,s = r(4).leaveModule,u && (u.register(l,"Error","/Users/jackple/Documents/react/ts-react-webpack4/src/components/Error/index.tsx"),u.register(i,"default",s(e)) }).call(this,r(12)(e)) ...
怎么看都不合理呀! 为什么会出来我的本地源文件路径! 本地开Nginx调试生产环境代码,虽然能跑,不过,这不是我想要的!
最后,这部分的处理结果是把react-hot-loader/babel删除之! 再将tsx接受hot reload还原为旧式写法:
import { AppContainer } from 'react-hot-loader'
import AppRouter from './router'
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,document.getElementById('app') as HTMLElement
)
}
render(AppRouter)
// Hot Module Replacement API
if (module.hot) {
module.hot.accept(['router'],() => {
import('./router').then(mod => render(mod.default))
})
}
- 再者是为配合webpack4的代码分割(dynamic import),需要把tsconfig.json中的module置为esnext(主要是为了让typescript不编译import),不知道是不是我配置失误,显示以下错误:
ERROR in ./src/index.tsx Module build Failed: SyntaxError: 'import' and 'export' may only appear at the top level (14:8) 12 | if (module.hot) { 13 | module.hot.accept(['router'],() => { > 14 | import('./router').then(mod => render(mod.default)); | ^ 15 | }); 16 | }
不是说好的支持import语法了咩? 最后还是要加上Syntax-dynamic-import的babel插件
bootstrap:74 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at i (bootstrap:74)
at Object.31 (index.css:1)
at i (bootstrap:74)
at Object.32 (index.css?f62f:2)
at i (bootstrap:74)
at Object.52 (index.tsx:3)
at i (bootstrap:74)
at index.tsx:9
at <anonymous>
过程曲折,还有一些问题没写上,具体请参考项目...
