使用 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按需引入样式无效