作为 React 官方维护的命令行工具,create-react-app(简称 CRA)能够极其轻松地创建配置完备的 React 应用,帮助使用者快速进入 React 开发。它的最大缺憾是创建的应用不能随心所欲地定制配置。想要定制,只能 eject。而 eject 就意味着应用所有的配置都交由使用者维护,繁琐令人望而却步。
现在,通过 wuzzle,我们能够在不 eject 的情况下任意定制 CRA 创建的 React 应用。
不 eject 的情况下查看 CRA webpack 配置
首先,用 CRA 创建一个支持 TypeScript 的演示应用(如果不习惯用 TS 去掉参数 --template typescript
即可):
$ npx create-react-app --template typescript demo
# ...
$ cd demo
安装 wuzzle:
$ npm i -D wuzzle
打开 package.json
编辑 scripts
挂载 wuzzle:
"scripts": {
- "start": "react-scripts start",
+ "start": "wuzzle react-scripts start",
- "build": "react-scripts build",
+ "build": "wuzzle react-scripts build",
},
现在,通过参数 --dry-run
运行 start
或 build
脚本就可以直接查看 CRA 内部使用的 webpack 配置了:
$ npm run build -- --dry-run
# ...
@wuzzle/cli:applyConfig Webpack config with difference: {
# ...
devtool: # ...
entry: # ...
output: #...
cache: #...
resolve: # ...
module: # ...
plugins: # ...
# ...
}
不 eject 的情况下引入 less、使用 antd
在样式文件上,CRA 应用支持 css、scss/sass,但不支持 less。想要全面使用 antd 并做主题修改,需要在 webpack 配置引入 less。回到 --dry-run
运行结果细看一下 module 字段:
$ npm run build -- --dry-run
# ...
@wuzzle/cli:applyConfig Webpack config with difference: {
# ...
module: {
# ...
rules: [
# ...
{
oneOf: [
# ...
{
test: /\.(scss|sass)$/,
exclude: /\.module\.(scss|sass)$/,
use: [
{
loader: '.../mini-css-extract-plugin/dist/loader.js',
options: {}
},
{
loader: '.../css-loader/...',
options: # ...
},
{
loader: '.../postcss-loader/...',
options: # ...
},
{
loader: '.../resolve-url-loader/...',
options: # ...
},
{
loader: '.../sass-loader/...',
options: # ...
}
],
},
{
test: /\.module\.(scss|sass)$/,
use: [
{
loader: '.../mini-css-extract-plugin/dist/loader.js',
options: # ...
},
{
loader: '.../css-loader/...',
options: # ...
},
{
loader: '.../postcss-loader/...',
options: # ...
},
{
loader: '.../resolve-url-loader/...',
options: # ...
},
{
loader: '.../sass-loader/...',
options: # ...
}
]
},
# ...
]
}
]
},
# ...
}
不难发现,sass 的配置方法和 less 的很接近,只要稍加改造,把 sass-loader 替换成 less-loader 并去掉 resolve-url-loader 就达成目标了。
安装一下配置 less 所需的依赖:
npm i -D less less-loader
然后,在 package.json
旁创建文件 wuzzle.config.js
修改 CRA 内部使用的 webpack 配置,这里可以使用 wuzzle 提供的修改帮助方法减轻工作量:
const appPaths = require('react-scripts/config/paths');
const {
deleteUseItem, firstRule