webpack配置 react + ts 项目热替换功能

使用 webpack 配置项目坑是真多呀！搞了一下午才把坑填完，最后得出结论：遇到坑就到 npm 官网，看官方文档，使用搜索引擎看别人的填坑经历很多时候不一定能解决问题，遇到问题还是去 npm 或者 GitHub 上比较快啊。。这篇文章分享一下我遇到的两个坑~

react + ts 项目配置热替换

首先配置 webpack 和 tsconfig。React 使用热更替官方推荐下载 react-hot-loader 这个包，使用时需要先下载。webpack 配置如下：

const { HotModuleReplacementPlugin, NamedModulesPlugin } = require('webpack');

module.exports = {
	entry: ['react-hot-loader/patch', path.join(__dirname, '../client/index.tsx')],
	devServer: {
		hot: true,
		// ...
	},
	plugins: [
		new HotModuleReplacementPlugin(),
        new NamedModulesPlugin()
	]
}

然后来到 babelrc 配置文件，添加一个 plugin：

{
	"plugins": [
	    "@babel/proposal-class-properties",
	    "@babel/proposal-object-rest-spread",
	    "react-hot-loader/babel"
  	]
}

tsconfig 配置：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react"
  },
  "include": ["./src/**/*"]
}

然后在 React 应用中使用热更替：

// App.js
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

配置完之后发现热更新并没有生效。这就还需要下载一个 webpack 插件：

yarn add fork-ts-checker-webpack-plugin

然后把这个插件集成到 webpack 中：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
	plugins: [
		new ForkTsCheckerWebpackPlugin(),
		new webpack.NamedModulesPlugin(),
		new HtmlWebpackPlugin()
	]
};

OK，热更替功能就有了。

antd 引入样式不生效

这个问题让我很头大，引入 css 了都为啥没效果！？有时候页面还一直在闪烁，弄得我不知所措。原因在网上搜到了，在 css-loader 中使用了 cssModule 导致 antd 样式失效。因此要解决这个问题，一个办法是不要使用 cssModule 了，如果还是想使用，那就要再做配置了。

这个配置可以参考简书上的一篇文章：antd按需引入样式无效