webpack 是否将 lib 源导入到每个模块中？

Question

我用 react-create-app 启动了一个 FE 应用程序。后来，我将完全相同的源代码移动到我的一个带有自定义 webpack 配置的 django 项目中（因此它可以加载 django 的静态文件）。

长话短说，我的自定义 webpack 构建几乎是 react-create-app 构建的两倍。 278kb 与 478kb

大部分模块都导入了 jquery 和 bootstrap js。所以我的猜测是我的配置正在将所述库导入每个模块。

我的大部分模块导入看起来像：

let React = require('react');
import $ from 'jquery/src/jquery';
import 'bootstrap/dist/js/bootstrap';

我的 webpack 配置看起来像

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry:[ 
    './app.jsx'
  ],
  output:{
    filename:'../app.bundle.js'
  },
  module:{
    loaders:[
      {
        test:/\.js[x]?$/,
        loader:'babel-loader',
        exclude:/(node_modules)/,
        query:{
          presets:['es2015','react']
        }
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin()
  ]
};

Granted 是一个非常基本的 webpack 配置。因此，我的猜测是我在 react-create-app 中缺少一个现有的插件，它避免了一遍又一遍地导入相同的库。我已经在文档中查找 Webpack 是否会执行此操作的信息，但似乎找不到任何信息。

我研究了公共块，但这似乎解决了其他问题，我真的不需要或不想拥有一个独立的块包。

Answer 1

经过进一步研究，我将 webpack 配置文件更改为：

  plugins: [
    new UglifyJsPlugin(),
    //enable production build:
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    //expose jquery window.$ global
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        tether: 'tether',
        Tether: 'tether',
        'window.Tether': 'tether',
    })
  ]

因此bootstrap.js能够在window中找到$对象，而不是像以前那样将整个源库导入到模块中。

我也改了：

import $ from 'jquery/src/jquery';

到

let $ = require('jquery');

它将 filsize 从 480kb 减少到 300kbs，这似乎与 react-create-app 包一致。

webpack 是否将 lib 源导入到每个模块中？

Do web pack import lib source into every single module?

reactjs

webpack

webpack-2