antd在webpack里面的配置

Posted 2020-10-25 馒头加梨子

概述

antd是蚂蚁金服打造的一个react组件，真的非常棒，我看了下官方文档，感觉比bootstrap要好。唯一的缺点可能就是打包的时候要打包它的一些样式表，所以资源体积会很大，并且css可能会和自己的相冲突。

我在webpack中配置antd配置了很久，现在把它记录下来，供以后开发时参考，相信对其他人也有用。

配置

配置代码如下：

    module: {
        loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets:['react', 'es2015'],
                plugins:[
                    ['import', {libraryName: 'antd', style: 'css'}] //按需加载
                ]
            },
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        ]
    }

我从中学到了什么

由于自己还是比较小白的，所以在写配置文件的时候踩了许多坑，记录如下：

(1)引号后面的大括号，中括号，小括号的左括号{、{、(不能另起一行。(本来为了好看，我就把他们另起一行写，但是这样是不行的，原因是编译的时候会自动在引号后面加分号，造成错误)

(2)变量名一定要注意，有的变量名要用单引号括起来，有的不需要。(比如上面的libraryName和style就不能用单引号括起来)