webpack to bundle library antd - reactjs

Question

I'm using and design library for my react application.
And I've faced with huge imports, that hurts my bundle (currently 1.18 mb in minified version because of ant-design lib).
var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
vendor: ['react', 'react-dom','antd'],
app: './Scripts/js/app.js',
},
output: {
path: path.join(__dirname, "Scripts/bundles"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', "less-loader"]
},
{
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
options: {
presets: ['es2015', 'react', 'stage-0'],
},
},
]
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
}
module.exports = config;
And my app
import React from 'react'
import ReactDOM from 'react-dom'
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, document.getElementById('container'));
Those few components are certainly not 1.2M together.

Answer 1

Install babel-plugin-import and add it to the babel-loader options:
options: {
presets: ['es2015', 'react', 'stage-0'],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
If you don't want to use the babel plugin, you'd have to import it this way:
import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css';