webpack 打包库 antd

Question

我正在为我的 React 应用程序使用和设计库。而且我面临着巨大的进口，这伤害了我的包（由于 ant-design lib，目前缩小版本为 1.18 mb）。

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'));

那几个组件加起来肯定不是120万。

Answer 1

安装 babel-plugin-import 并将其添加到 babel-loader 选项：

options: {
  presets: ['es2015', 'react', 'stage-0'],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]  
}

如果你不想使用 babel 插件，你必须这样导入它：

import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css';

webpack 打包库 antd

webpack to bundle library antd

reactjs

antd