craco
对于creat-react-app创建的项目,我们想要修改其webpack的配置就需要用到craco,这里先进行安装:
npm install @craco/craco --save
目前建议6.2.0版本,我使用的是6.2.0比较文定,没有出啥问题
配置文件
安装好craco之后,我们需要设置配置文件来修改webpack
这里我写一个例子:项目中全局加载antd的css,通过修改webpack能让它自动读取,而不需要手动进行引入
新建craco.config.js文件
首先在项目根目录创建craco.config.js文件,在里面进行配置的修改:
如这里我设置导入antd中的css,这样项目启动的时候,webpack就会自动进行读取:
因为需求原因,这里我还需要装一个babel-plugin-import插件,直接npm安装就行
module.exports = {
babel: {
plugins: [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
}
然后重新运行项目,就可以实现antd自动的按需加载
当然这里还可以进行更多关于webpack的修改,详情可以参考webpack的中文文档:webpack中文文档