Webpack开发模式不会创建多个包文件

Question

我被困在配置文件中的一些webpack dev配置中。当我以生产模式运行时，我能够获得多个包文件（abc.bundle.js，cde.bundle。 js），但在开发模式下不能获得相同的结果。我只是在开发模式下获得'main.bundle.js'。

  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, 
] 
} 

return { 
devtool: devtool, 
entry: entry, 
output: { // Compile into js/build.js 
    path: path.resolve(__dirname, 'build'), 
    filename: '[name].bundle.js' 
}, 
module: { 
    rules: [{ 
    test: /\.js$/, // Transform all .js files required somewhere within an entry point... 
    loader: 'babel-loader', // ...with the specified loaders... 
    exclude: /node_modules/, 
    query: { 
     presets: ['es2015', 'react', 'stage-2'] 
    } 

    }, { 
    test: /\.css$/, // Transform all .css files required somewhere within an entry point... 
    use: [{ 
     loader: 'style-loader' 
     }, { 
     loader: 'css-loader' 
     }, { 
     loader: 'postcss-loader' 
     }, { 
     loader: 'sass-loader' 
     }] // ...with PostCSS 
    }, { 
    test: /\.jpe?g$|\.gif$|\.png$/i, 
    loader: "url-loader?limit=100000" 
    }, { 
    test: /\.(woff|woff2|eot|ttf|svg)$/, 
    loader: 'url-loader?limit=100000' 
    }] 
}, 
plugins: plugins, 
target: "web", // Make web variables accessible to webpack, e.g. window 
stats: false, // Don't show stats in the console 
node: { 
    fs: "empty" 
} 
} 
} 

Answer 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' 
]; 

你需要像你一样的生产将其转化成一个地图：@andrie。它的工作

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' 
};