webpack打包不是按需打包的吗？

Question

第一次用webpack，引入react、antd两个模块，打包之后居然有9兆，注释掉引入antd的代码就只有2兆了，不是说webpack可以按需打包吗，我代码里只用到Button一个模块，为什么貌似全部都打包了？是不是哪里弄错了？

main.js

import React from 'react';
import{render} from "react-dom";
import {Button} from 'antd';

render(
  <div>
     <Button type="primary">Primary</Button>
  </div>
  ,document.getElementById("root"));

控制台

打包出来的common.js占9.41兆

C:\Users\Administrator\Desktop\antDemo>webpack
Hash: a439b1c87d31ba7af967
Version: webpack 1.13.3
Time: 8629ms
    Asset     Size  Chunks             Chunk Names
common.js  9.41 MB       0  [emitted]  main
    + 902 hidden modules

Answer 1

见按需加载

Answer 2

1. npm run eject暴露所有依赖项

2. npm i babel-plugin-import -D下载这个包

3. 修改config/webpack.config.dev.js文件下的

   //module.loaders[1].query内添加    //注意并没有这么一个属性,只是路径指引,你搜query就行,里边加下面这段就OK
   
   plugins: [
            ['import', [{ libraryName: "antd", style: 'css' }]],
      ],

4. 不需要再引入ant的css了,只要import了组件,它的样式也会自动按需引入

Answer 3

webpack 默认时将你import模块的export都打包进来的, webpack2.0后有相关按需导入的算法, 不过beta版还存在问题,
你可以用babel的相关插件做到antd的按需加载