Django网页包在全新的Django/ReactJS应用程序中编译misc JS，生成21500行文件

为了让Django和ReactJS正常工作，我一直在遵循以下教程：

我启动了一个全新的Django项目，添加了一个名为

home

的应用程序，但除了教程中概述的内容之外，我什么也没做

无论如何，当我编译JS时，它创建了一个大约21500行和800kb的文件。我的ReactJS文件只有大约20行，Django应用程序中没有其他JS。它似乎是在

virtualenv

或其他地方编译依赖项。为了防止这种情况

webpack.config.js

//require our dependencies
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means 
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index', 

    output: {
        //where you want your compiled bundle to be stored
        path: path.resolve('./assets/bundles/'), 
        //naming convention webpack should use for your files
        filename: '[name]-[hash].js', 
    },

    plugins: [
        //tells webpack where to store data about your bundles.
        new BundleTracker({filename: './webpack-stats.json'}), 
        //makes jQuery available in every module
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        })
    ],

    module: {
        loaders: [
            //a regexp that tells webpack use the following loaders on all 
            //.js and .jsx files
            {test: /\.jsx?$/, 
                //we definitely don't want babel to transpile all the files in 
                //node_modules. That would take a long time.
                exclude: /node_modules/, 
                //use the babel loader 
                loader: 'babel-loader', 
                query: {
                    //specify that we will be dealing with React code
                    presets: ['react'] 
                }
            }
        ]
    },

    resolve: {
        //tells webpack where to look for modules
        modulesDirectories: ['node_modules'],
        //extensions that should be used to resolve modules
        extensions: ['', '.js', '.jsx'] 
    }   
}

有几件事

React和jQuery是捆绑包的一部分。是的，您只编写了约20行代码，但您也将React导入到项目中，并且由于您只定义了一个条目，因此导入的所有内容都将捆绑到单个捆绑包中（这可能适合您的需要）。此外，您的Webpack配置还全局导入jQuery。您可以将依赖项分解为它们自己的捆绑包或多个捆绑包，并根据需要加载它们

您正在捆绑React的开发版本。当Webpack运行并捆绑您的项目时，它将根据

process.env

的计算结果是“开发”还是“生产”执行不同的操作。其思想是在开发过程中使开发更容易，构建时间更快。在React的例子中，您得到的开发版本包含大量注释和额外检查（更多KB），这仅仅是因为您的环境没有设置为“生产”

摇树、重复数据消除和缩小是你的朋友。我会让你看看这些，但基本上，摇树（Webpack 2的一部分）使你只捆绑你实际使用的库的一部分。在Webpack1.x中，有一个重复数据消除插件，它将删除重复的代码部分，而缩小将缩小您的代码。您可以将Webpack配置设置为仅在生产构建环境中运行这些步骤

尝试用以下内容替换插件部分：

plugins: [
    ...(process.env === 'production' ? [
        // set webpack process env to production
        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify('production') },
        }),
        new webpack.optimize.DedupePlugin(),  // webpack 1.x only
        new webpack.optimize.UglifyJsPlugin({ comments: false }),
    ] : []),
    //tells webpack where to store data about your bundles.
    new BundleTracker({filename: './webpack-stats.json'}), 
    //makes jQuery available in every module
    new webpack.ProvidePlugin({ 
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery' 
    }),
],