webpack 是否将 lib 源代码导入每个模块？答案

【问题标题】：Do web pack import lib source into every single module?webpack 是否将 lib 源代码导入每个模块？
【发布时间】：2018-05-27 19:52:37
【问题描述】：

我使用 react-create-app 启动了一个 FE 应用程序。后来，我将完全相同的源代码移动到我的一个 django 项目中，并使用自定义 webpack 配置（因此可以使用 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 是否会执行此操作的信息，但似乎找不到任何信息。

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

【问题讨论】：

标签： reactjs webpack webpack-2

【解决方案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');

它将文件大小从 480kb 减少到 300kbs，这似乎与 react-create-app 捆绑包一致。

【讨论】：