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

robot_l
  • 72

第一次用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
回复
阅读 8.2k
3 个回答
  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了组件,它的样式也会自动按需引入

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏