webpack开发模式不创建多个bundle文件
Webpack development mode does not create multiple bundle file
我的 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,
]
}
}
您的开发模式入口点包含:
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'
};
我的 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,
]
}
}
您的开发模式入口点包含:
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'
};