带webpack 4的树震动嵌套模块

Question

不知道为什么摇树没有像我预期的那样有效。。。我的目标是建立一个树摇动库。

• index.js
  • 标题
  • 按钮

  我有一个使用这个库的webpack应用程序。当我只导入Header组件时，Button模块会按预期删除，但我的webpack包包含ButtonGroup组件。

  有人能解释一下为什么吗？如果可能的话，我如何从webpack构建中摇动嵌套组件？

  谢谢

  汇总

  汇总。配置。js

  import babel from 'rollup-plugin-babel';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  
  export default {
    input: './src/index.js',
    output: {
      name: 'ui-component',
      sourcemap: true, 
      sourcemapFile: 'ui-component',
      format: 'es',
      file: 'build/ui-component.module.js',
    },
    plugins: [
      replace({
        'process.env.NODE_ENV': JSON.stringify('production')
      }),
      resolve({
          extensions: [ '.js', '.jsx', '.json' ]  
      }),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
      })
    ],
    external: ['react', 'react-dom']
  };
  

  指数js

  export * from './Button';
  export * from './Header';
  

  标题。jsx-简单反应组件

  import React, { Component } from 'react';
  
  export class Header extends Component {
    render() {
      return (
        <div style={ { padding: '3px 7px' } }>
          <span>{this.props.children}</span>
        </div>
      )
    }
  }
  

  按钮jsx-react组件

  import React, { Component } from 'react';
  import { ButtonGroup } from './ButtonGroup';
  
  class Button extends Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          const display = 'button';
          return (
              <ButtonGroup>
                  <a> {display} </a>
              </ButtonGroup>
          );
      }
  }
  
  export { Button } 
  

  以及我的网页包配置和构建：

  网页包。配置

  const path    = require('path');
  const express = require('express');
  
  module.exports = {
    mode: 'production',
    devtool: false,
    optimization: {
      sideEffects: false
    },
    entry: {
      index: './src/App.jsx'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, './bundle/')
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        'ui-component': path.resolve(__dirname, '../') 
      }
    },
    module: {
      rules: [
        {
          test: /\.(jsx|js)$/,
          include: [
            path.resolve(__dirname, 'src'), 
            path.resolve(__dirname, '../') 
          ],   
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [ "@babel/env", { "modules": false}],
                [ "@babel/react" ]
              ],
              plugins: [
                ["@babel/plugin-proposal-object-rest-spread"],
                ["@babel/plugin-proposal-class-properties"] 
              ]
            }
          }
        },
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          use: [ 'url-loader' ]
        }
      ]
    },
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    },
    devServer: {
      contentBase: './',
      publicPath: '/build',
      port: 8080,
      before(app) {
        app.use('/build', express.static(path.resolve(__dirname, '../build/')))
      }
    }
  };
  

  *应用程序。jsx*

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Header } from 'ui-component';
  
  class App extends React.Component {
    render() {
      return (
        <div>
          <Header >
            header only
          </Header>
        </div>
      );
    }
  }
  
  
  ReactDOM.render(
    <App />, document.getElementById('app')
  )
  

  *构建状态*

  single entry ./src/App.jsx  index
       | ./src/App.jsx 751 bytes [depth 0] [built]
       |     [no exports]
       |     ModuleConcatenation bailout: Module is an entry point
       |     single entry ./src/App.jsx  index
       | ../build/ui-component.module.js 1.43 KiB [depth 1] [built]
       |     [exports: Button, Header]
       |     [only some exports used: Header]
       |     harmony side effect evaluation ui-component  ./src/App.jsx 5:0-38
       |     harmony import specifier ui-component  ./src/App.jsx 19:64-70
  

  *构建输出*

  e.prototype.render=function(){return o.a.createElement("div",null,"Groups")},e}
  




Answer 1

我在嵌套模块和重新导出（两层重新导出用于更简单的代码维护-更少接触主入口点文件）方面也遇到了这个问题。

Webpack目前不能很好地处理这种情况，但看起来Webpack v5将：https://github.com/webpack/webpack/pull/9203

Answer 2

如果您不需要按钮，请像从“ui组件/标题”导入标题一样导入它 或在包中添加“副作用”：false。“ui组件”的json；https://github.com/webpack/webpack/tree/master/examples/side-effects