版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
不抽离 webpack配置的方案
第一步
下载react-app-rewired 和 customize-cra
$ npm install react-app-rewired customize-cra -D
第二步
下载 babel-plugin-import
$ npm install babel-plugin-import -D
第三步
修改package.json里的配置
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
第四步
在项目根目录创建一个 config-overrides.js 用于修改默认配置
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require( 'path' )
function resolve ( dir ) {
return path.join( __dirname, dir)
}
/* 路径别名配置 */
module.exports = override(
addWebpackAlias({
'@': resolve('src'),
components: resolve( './src/components' ),
assets: resolve( './src/assets' ),
pages: resolve( './src/pages' ),
utils: resolve( './src/utils' ),
layout: resolve( './src/layout' ),
}),
/* antd组件按需加载 */
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
以上方案 来自antd 覆盖配置方案