react項目中引入antd,報錯

在項目中使用


按照螞蟻官網的方式引入配置，webpack的配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'inline-source-map',
    /*入口*/
    entry: {
        app:[
            "@babel/polyfill",
            path.join(__dirname, '../src/index.js')
        ],
        vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
    },
    mode:'development',
    /*輸出到dist文件夾，輸出文件名字為bundle.js*/
    output: {
        publicPath:'/',
        path: path.join(__dirname, '../dist'),
        filename: '[name].[hash].js',
        chunkFilename: '[name].[chunkhash].js'
    },
    // webpack-dev-server
    devServer: {
        // contentBase: path.join(__dirname, '../dist'),
        compress: true,  // gzip壓縮
        host: '0.0.0.0', // 允許ip訪問
        hot:true, // 熱更新
        historyApiFallback:true, // 解決啟動后刷新404
        port: 8000 // 端口
    },
    /*src文件夾下面的以.js結尾的文件，要使用babel解析*/
    /*cacheDirectory是用來緩存編譯結果，下次編譯加速*/
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory=true'],
        },{
            test: /\.css$/,
            use: ["style-loader", {
                loader:'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]--[hash:base64:5]'
                }
            }, 'postcss-loader']
         }, {
            test: /\.less$/,
            loader: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        },{
             test: /\.(png|jpg|gif)$/,
             use: [{
                 loader: 'url-loader',
                 options: {
                     limit: 8192
                 }
             }]
         }]
    },
    // 別名配置
    resolve: {
        alias: {
            pages: path.join(__dirname, '../src/pages'),
            components: path.join(__dirname, '../src/components'),
            router: path.join(__dirname, '../src/router'),
            images: path.join(__dirname, '../src/images'),
            actions: path.join(__dirname, '../src/redux/actions'),
            reducers: path.join(__dirname, '../src/redux/reducers')
        },
        mainFiles: ['index'],
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, '../public/index.html')
        })
    ]
};

package.json如下

{
  "name": "react-test",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "homepage": ".",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.config.js"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-import": "^1.13.3",
    "clean-webpack-plugin": "^2.0.1",
    "core-js": "2.6.5",
    "cross-env": "^7.0.3",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "mini-css-extract-plugin": "^0.5.0",
    "mockjs": "^1.0.1-beta3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "antd": "^4.16.6",
    "axios": "^0.18.0",
    "history": "^4.6.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "qrcode.react": "^1.0.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-fastclick": "^3.0.2",
    "react-loadable": "^5.5.0",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-router-redux": "^4.0.8",
    "redux": "^4.0.1",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0"
  }
}

babel的配置如下，這個是按需加載antd的

const babelConfig = {
    presets: [["@babel/preset-env",{
        useBuiltIns: "entry",
        corejs: 2
    }], "@babel/preset-react"],
    plugins: [
        ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }],
        "@babel/plugin-syntax-dynamic-import",
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties'
    ],
    ignore: ['node_modules', 'build'],
}

module.exports = babelConfig;

項目結構如下

在網上也搜索了很多東西，但是還是不行，不知道是不是less的版本問題