Question

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

长话短说，我的自定义webpack构建几乎是react-create-app构建的两倍。 278kb vs 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能够在窗口中找到$ object，而不是像以前那样将整个源库导入模块。

我也改变了：

import $ from 'jquery/src/jquery';

到

let $ = require('jquery');

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

web pack是否将lib源导入每个模块？

1 个答案: