前言

webpack4正式版发布也有一段时间了, 为了从实际中感受变化, 于是以typescript, react, 结合之前翻译的一篇文章webpack-4.0更新日志（翻译）, 搭建一个可供项目使用的框架.

项目状况

github

前往

项目已使用

• webpack-4
• typescript
• react
• react-router-4
• component hot reload
• async component
• css-module(import .(s)css auto generate .(s)css.d.ts)
• svg icon

待添加

• state management (Redux or Mobx)
• UI lib (Element-React)
• jest

主要库及版本

• webpack --------- 4.1.1
• typescript -------- 2.7.2
• react ------------ 16.2.0
• react-router-dom -- 4.2.2
• react-hot-loader --- 4.0.0
• ......
• node ------------- 8.9.4

坑

我是由另一个项目升级过来的, 因为原项目没用babel, 直接以ts-loader转.

原项目涉及到配置变化的库及版本

• webpack --------- 4.1.1
• react-hot-loader --- 3.1.3

原配置:

// 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)
复制代码

1. 首先是react-hot-loader/babel, 无论是按官方推荐配置, 还是写在.babelrc, 以上两者都加上环境判断, 开发环境没问题, 可是打包出来的生产环境代码看起来怪怪的:

...
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", "/Users/jackple/Documents/react/ts-react-webpack4/src/components/Error/index.tsx"), 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))})
}复制代码

1. 再者是为配合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插件

1. css module提取

new ExtractTextPlugin({filename: assetsPath('css/[name].[contenthash].css')
})
复制代码

bootstrap:74 Uncaught (in promise) TypeError: Cannot read property 'call' of undefinedat 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:9at <anonymous>
复制代码

异步组件的css提取问题, 暂以提取所有css到一个文件中告终, 即:

new ExtractTextPlugin({allChunks: true,filename: assetsPath('css/[name].[contenthash].css')
})
复制代码

过程曲折, 还有一些问题没写上, 具体请参考项目...

如果大家有更好的解决方案, 也欢迎评论或提issue