Webpack4.0+React+Mobx+Antd脚手架样式配置及旧配置报错问题咨询

嘿，我一眼就看出问题所在啦！你把babel-plugin-import的配置放错地方了——这个是给Babel用的插件配置，不是Webpack的插件，这就是导致Webpack报错的原因，同时Antd没样式也是因为样式没有被正确引入和处理。下面一步步帮你解决：

1. 先把必要依赖装全 #

首先确保你已经安装了这些开发依赖：

npm install babel-plugin-import css-loader style-loader --save-dev
# 用yarn的话就是
yarn add babel-plugin-import css-loader style-loader -D

2. 正确配置babel-plugin-import #

这个插件是Babel的插件，绝对不能放到Webpack配置的plugins数组里，要写到Babel的配置中：

方法一：用.babelrc文件配置 #

在项目根目录创建或修改.babelrc文件：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // 这里选css就加载预编译好的css，要是想自定义主题可以设为true，再配置less-loader
    }]
  ]
}

方法二：直接在Webpack的babel-loader里配置 #

如果你的Webpack配置里直接写了babel-loader的options，那可以把插件配置写在这里：

module.exports = {
  // ... 其他Webpack配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
            plugins: [
              ["import", {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
              }]
            ]
          }
        }
      },
      // ... 其他loader规则
    ]
  }
}

3. 让Webpack能处理CSS文件 #

Antd的样式是CSS格式（当你设style: "css"时），所以需要在Webpack里添加CSS解析规则，把这段加到module.rules里：

{
  test: /\.css$/,
  use: [
    'style-loader', // 开发环境用这个把样式注入到DOM里
    'css-loader'    // 负责解析CSS文件
  ]
}

要是你在生产环境打包，更推荐用mini-css-extract-plugin把样式提取成单独的CSS文件，这样性能更好：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css'
    })
  ]
}

4. 为什么之前会报错？ #

你遇到的Invalid configuration object错误，本质是把Babel插件的数组配置（["import", {...}]）放到了Webpack的plugins数组里。Webpack的插件要求是实例化的插件对象（比如new HtmlWebpackPlugin()），它识别不了Babel这种数组形式的配置，把这段配置移到Babel的配置里，报错就消失啦！

内容的提问来源于stack exchange，提问作者Ether