react + antd + webpack
处理js,jsx,ts,tsx语法
处理css
style-loader:添加到js中,这样修改才会热更新,在开发环境中需要加上,生产环境如果使用mini-css-extract-plugin
抽离css,那么不要加上style-loader
注意loader使用顺序
使用less-loader需要同时安装less库
postcss-loader处理css中的一些问题,压缩等,同时可以使用postcss插件,例如postcss-flexbugs-fixes
, postcss-cssnext
, cssnano
等。
处理文件(字体,图片,影视频等)并重新命名
处理图片,设置路径以及base64图片压缩
设置html模板以及输出路径等
设置webpack全局变量
new webpack.ProvidePlugin({
// 这样就不用每个文件都引用react了,但是需要在eslintrc中配置eslint语法检测
React: 'react',
}),
css代码抽离,详见config/webpack.prod.js
清除之前打包的代码
webpack.HotModuleReplacementPlugin
与 webpack.NamedModulesPlugin()
。前者使用热更新,后者在控制台展示热更新名字。
热更新需要同时使用 react-hot-loader
。
npm i --save-dev react-hot-loader
使用详见: src/App.jsx
。还需要在 .babelrc
中配置 plugins
ESlint + Prettier
npm i --save-dev eslint
VSCode 安装插件
.eslintrc.js中添加
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
添加 .ptettierrc.js 配置如下,可自行修改
// configs see https://prettier.io/docs/en/options.html
module.exports = {
trailingComma: 'es5',
singleQuote: true,
tabWidth: 2,
semi: true,
bracketSpacing: true,
arrowParens: 'always'
}
在settings.json 中添加如下
// jsx自动修复有问题,取消js的format
"editor.formatOnSave": false,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
"prettier.singleQuote": true,
// 点击保存时,根据 eslint 规则自定修复,同时集成 prettier 到 eslint 中
"prettier.eslintIntegration": true,
// 保存自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
在 devServer 中 添加 historyApiFallback: true
根目录添加 jsconfig.json
文件,与 alias 中的对应
{
"compilerOptions": {
"experimentalDecorators": true,
"baseUrl": "./",
"paths": {
"@/*": ["./src"],
"@comp/*": ["./src/components"],
"@img/*": ["./src/img"],
"@styl/*": ["./src/style"],
"@pages/*": ["./src/pages"],
}
},
"exclude": ["node_modules", "dist"]
}