引入antd后，ERROR in ./node_modules/antd/lib/list/style/index.css

原來(lái)使用webpack 打包無(wú)誤，但是引入了antd后，開(kāi)始報(bào)錯(cuò)了

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');// 熱加載需要的 webpack
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
// 引入css 單獨(dú)打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 設(shè)置生成css 的路徑和文件名，會(huì)自動(dòng)將對(duì)應(yīng)entry入口js文件中引入的CSS抽出成單獨(dú)的文件


// the path(s) that should be cleaned
let pathsToClean = [
    // 清理的文件夾名
    'dist',
    'static'
]
// the clean options to use
let cleanOptions = {
    root:     '/', //清理的路徑
    // exclude:  ['*.html'],
    verbose:  true,
    dry:      false
}


module.exports = {
    entry: {
        main: './src/main.js',

        // 將react相關(guān)組件打包成vendor.js
        vendor: [
            'react',
            'react-dom',
            'react-router'
        ]
        // 將jquery單獨(dú)打成一個(gè)獨(dú)立打文件
        //jquery:["jquery"],
        // highcharts:["highcharts"],
        //echarts:["echarts"]


    },
    module: {
        rules: [
            /*
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            */
            {
                test: /\.less/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            /*
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            */
            {
                //正則匹配后綴.js文件;
                test: /\.js$/,
                //需要排除的目錄
                exclude: /(node_modules|bower_components)/,
                //加載babel-loader轉(zhuǎn)譯es6
                loaders: [
                    'babel-loader', // .babelrc 具體配置文件
                    //'eslint-loader'// 必須在 .babelrc 的后面

                ]
            },
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,
                exclude: /(public)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {

                            limit:8000000,   //小于50K的 都打包

                            name:'[hash:8].[name].[ext]',
                            // publicPath:"img/",  //替換CSS引用的圖片路徑 可以替換成愛(ài)拍云上的路徑
                            // outputPath:"../img/"        //生成之后存放的路徑
                        }
                    }
                ]
            }

        ]
    },
    plugins: [
        // new CleanWebpackPlugin(['static']),
        new CleanWebpackPlugin(pathsToClean, cleanOptions),
        new webpack.optimize.CommonsChunkPlugin({
            // names: ['jquery','vendor','runtime'],
            // names: ['jquery','echarts','highcharts','vendor'],//跟頁(yè)面插入的順序相反
            // names: ['echarts','highcharts','vendor'],
            // names: ['highcharts','vendor'],
            names: ['vendor'],
            minChunks: Infinity
        }),

        new HtmlWebpackPlugin({
            title: '',
            inject: false,
            template: require('html-webpack-template'),
            appMountId: 'app', // 要增加的 div 節(jié)點(diǎn)
            headHtmlSnippet: '<link rel="bookmark"  type="image/x-icon" href="favicon.ico"/><br/>' +
                '<link rel="shortcut icon" href="favicon.ico"/><br/>' +
                '<script type="text/javascript" src="config/setting.js"></script><br/>'
        }),
        new HtmlWebpackExcludeAssetsPlugin(),
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        })


        /*
        new webpack.ProvidePlugin({ // 將 $ 變量掛載到 window 下面，可以在項(xiàng)目中直接使用 $ 不用再引用
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
        */

    ],
    // 通過(guò) output.filename 和 output.path 屬性，來(lái)告訴 webpack bundle（捆）的名稱，以及我們想要生成（emit）到哪里

    resolve: {
        //設(shè)置可省略文件后綴名（注：如果有文件沒(méi)有后綴設(shè)置‘’會(huì)在編譯時(shí)會(huì)報(bào)錯(cuò)，必須改成' '中間加個(gè)空格);
        extensions: [' ','.css','.less','.js','.json'],
    },
    externals: {

    }
};

補(bǔ)充

import React from 'react';
import { List } from 'antd';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
];

class StoreRoom extends React.Component {

    constructor() {
        super();
        this.state = {
            theDayUnfinished: [], // 當(dāng)日未完成
            threeDaysUnfinished: [], // 三日內(nèi)未完成
            overstock: [], // 積壓訂單
            theDaySend: [], // 當(dāng)日實(shí)際發(fā)貨工作量
            tableHeader: ["index", "order"], // 異常訂單表頭
            urgentTableData: [], // 異常訂單 - 加急
            skipTableData: [], // 異常訂單 - 漏過(guò)帳
            updateTableData: [], // 異常訂單 - 修改
        }

        this.clientScript = null;
    }

    render() {

        return (

            <div className={'storeroom_div'}>
                <h3 style={{ marginBottom: 16 }}>Default Size</h3>
                <List
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={data}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
                <h3 style={{ margin: '16px 0' }}>Small Size</h3>
                <List
                    size="small"
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={data}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
                <h3 style={{ margin: '16px 0' }}>Large Size</h3>
                <List
                    size="large"
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={data}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
            </div>
        )
    }

    componentDidMount() {
        const _self = this;
    }



}

export default StoreRoom;