0

原来使用webpack 打包无误,但是引入了antd后,开始报错了

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 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件


// 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相关组件打包成vendor.js
        vendor: [
            'react',
            'react-dom',
            'react-router'
        ]
        // 将jquery单独打成一个独立打文件
        //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转译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引用的图片路径 可以替换成爱拍云上的路径
                            // outputPath:"../img/"        //生成之后存放的路径
                        }
                    }
                ]
            }

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

        new HtmlWebpackPlugin({
            title: '',
            inject: false,
            template: require('html-webpack-template'),
            appMountId: 'app', // 要增加的 div 节点
            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 下面,可以在项目中直接使用 $ 不用再引用
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
        */

    ],
    // 通过 output.filename 和 output.path 属性,来告诉 webpack bundle(捆)的名称,以及我们想要生成(emit)到哪里

    resolve: {
        //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格);
        extensions: [' ','.css','.less','.js','.json'],
    },
    externals: {

    }
};

图片描述

补充

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: [], // 当日未完成
            threeDaysUnfinished: [], // 三日内未完成
            overstock: [], // 积压订单
            theDaySend: [], // 当日实际发货工作量
            tableHeader: ["index", "order"], // 异常订单表头
            urgentTableData: [], // 异常订单 - 加急
            skipTableData: [], // 异常订单 - 漏过帐
            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;
小刘 359
2018-03-07 提问
3 个回答
0

你的storeroom/index.js是怎么写的,antd是怎么引入的

0

.你试试 把 我红线 圈主的地方去掉。
图片描述

0

使用antd时,只需要配置babel-plugin-import后, 就无需引入样式。

{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

撰写答案

你可能感兴趣的

推广链接