使用.babelrc配置无效

[RunningCoderLee]

我使用create-react-app生成react项目，引入antd组件库后，如果在.babelrc中配置无法实现按需加载，在webpack的配置文件里配置则可以生效

.babelrc配置如下：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }]
  ]
}

[sorrycc]

eject 了? 没 eject 的时候不会走 .babelrc 的。https://github.com/facebookincubator/create-react-app/blob/15feb02/packages/react-scripts/config/webpack.config.dev.js#L149-L150

[afc163]

https://ant.design/docs/react/use-with-create-react-app

[RunningCoderLee]

不好意思，昨天写到一半先上传了，结果后来没网了，今天来补全

我生成react项目后执行eject了，正如上面@afc163贴的页面所说，如果我在webpack的配置文件里添加babel的配置是没有问题的，能够正常实现按需加载，但是我如果是在.babelrc中配置则无法生效，所以我想问问这2个有什么区别吗？是我写法有问题还是说用create-react-app生成的应用只能在webpack的配置文件里来设置按需加载？

.babelrc配置如下

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }]
  ]
}

此时启动应用显示如下

如果我在webpack里配置

{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
        cacheDirectory: true,
        plugins: [["import", { libraryName: "antd", style: "css"}]]
    }
},

这时就可以正常实现按需加载

[lcoder]

谢啦，终于知道webpack怎么配置了😂。建议readme.md里面写个这个

{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
        cacheDirectory: true,
        plugins: [["import", { libraryName: "antd", style: "css"}]]
    }
},

webpack新手不是很心酸啊

[KevinLee-Romens]

@sorrycc 虽然这个问题有解决方案了，可我还是想知道一下为什么在.babelrc里写配置会不生效，不知道能否抽空解答下这个问题，非常感谢（这个账号是发起issue的小号）

[afc163]

facebook/create-react-app#1066

https://github.com/ant-design/create-react-app-antd/blob/fdc0199b50f893a6b7ded8fba315e8f606e24dac/package.json#L86-L90

[KevinLee-Romens]

感谢解答

[zhangtiantian10]

我在webpack里配置了，但是还是没有起作用，样式未生效

[hello-astar]

终于找到了，用webpack.config.js配置方法成功了~

[Wuguanghua]

同样遇到这个问题，webpack 里配置 loader 生效而在.bablerc 文件中配置无效

webpack 的配置如下：

而且我的 presets 配置好像在 .bablerc 中也不生效，在这里也配置了。

{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: [["import", { libraryName: "antd-mobile", style: "css" }]]
                    }
                }
            },

.bablerc 配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }]
  ]
}

求大神解答两者区别。

[XianZhengquan]

如果不 eject如何配置呢？

[unknown-kk]

配置在.babelrc中重启新的配置才生效

[sissixxxxxxx]

同样遇到这个问题，webpack 里配置 loader 生效而在.bablerc 文件中配置无效

webpack 的配置如下：

而且我的 presets 配置好像在 .bablerc 中也不生效，在这里也配置了。

{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: [["import", { libraryName: "antd-mobile", style: "css" }]]
                    }
                }
            },

.bablerc 配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }]
  ]
}

求大神解答两者区别。

你检查一下配置文件名 .babelrc 是不是拼写错误成了**.bablerc**