Webpack 开发模式不会创建多个 bundle 文件答案

【问题标题】：Webpack development mode does not create multiple bundle fileWebpack 开发模式不会创建多个 bundle 文件
【发布时间】：2017-09-08 03:18:33
【问题描述】：

我的 Webpack 配置有问题。我在生产模式下获得多个捆绑文件，但在开发模式下没有。我希望这两种环境都能生成多个捆绑文件。

以下是我的配置文件的一部分，其中生产和开发的处理方式不同。我做错了什么？

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');

var appConfig = require('./config.js');
console.log("appConfig is ->>>", appConfig);
var appPort = appConfig.APP_PORT; //Port on which the application is running

process.noDeprecation = true;
module.exports = function(options) {
    var entry, jsLoaders, plugins, cssLoaders, devtool;
    console.log('options webconfig-->', options, 'directory name', __dirname);

    // If production is true
    if (options.prod) {
        console.log('production minifcation');
        // Entry
        entry = {
            veris: './js/abc.js',
            au680: './js/cde.js',
        };


        // Plugins
        plugins = [ // Plugins for Webpack
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                minimize: true
            })
        ];

    // If app is in development
    } else {
        devtool = 'source-map';
        // Entry
        entry = [
            "webpack-dev-server/client?http://0.0.0.0:" + appPort, // Needed for hot reloading
            "webpack/hot/only-dev-server", // See above
            //path.resolve(__dirname,'./js/app') // Start with js/app.js...
            './js/abc.js',
            './js/cde.js'
        ];

        // Only plugin is the hot module replacement plugin
        plugins = [
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify('development')
                }
            }),
            new webpack.HotModuleReplacementPlugin() // Make hot loading work,
        ]
    }
}

【问题讨论】：

标签： webpack bundling-and-minification

【解决方案1】：

您的开发模式入口点包含：

entry = [
  "webpack-dev-server/client?http://0.0.0.0:" + appPort, // Needed for hot reloading
  "webpack/hot/only-dev-server", // See above
  //path.resolve(__dirname,'./js/app') // Start with js/app.js...
  './js/abc.js',
  './js/cde.js'
];

您需要像在生产中那样将其转换为地图：

entry = {
  main: [
    "webpack-dev-server/client?http://0.0.0.0:" + appPort, // Needed for hot reloading
    "webpack/hot/only-dev-server" // See above
  ],
  //path.resolve(__dirname,'./js/app') // Start with js/app.js...
  veris: './js/abc.js',
  au680: './js/cde.js'
};

【讨论】：