对于common.entry
对象中的每个条目,我将以下内容打印到控制台(我的webpack.config.js
中有3个条目)。这是期望的输出吗?
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const parts = require('./lib/parts');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
test: path.join(__dirname, 'app', 'test.css'),
style: [
path.join(__dirname, 'app', 'main.css')
],
build: path.join(__dirname, 'build'),
};
const common = merge(
{
entry: {
app: PATHS.app,
style: PATHS.style,
test: PATHS.test
},
output: {
path: PATHS.build,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo'
})
]
}
);
var config;
// console.log(JSON.stringify(common,null,2));
switch(TARGET) {
case 'build':
config = merge(
common,
{
devtool: 'source-map',
output: {
path: PATHS.build,
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
}
},
parts.clean(PATHS.build),
parts.setFreeVariable(
'process.env.NODE_ENV',
'production'
),
parts.extractBundle({
name: 'vendor',
entries: ['react']
}),
parts.minify(),
parts.extractCSS(PATHS.style)
);
break;
default:
config = merge(
common,
{
devtool: 'eval-source-map'
},
parts.setupCSS(PATHS.style),
parts.devServer({})
);
}
// console.log("\n\n-------------\n\n"+JSON.stringify(config,null,2));
module.exports = validate(config);
LIB / parts.js
const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
exports.devServer = function(options) {
const ret = {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: 'errors-only',
host: options.host, // Defaults to `localhost`
port: options.port // Defaults to 8080
},
plugins: [
new webpack.HotModuleReplacementPlugin({
multiStep: true
})
]
};
if(options.poll) {
ret.watchOptions = {
aggregateTimeout: 300,
poll: 1000
};
}
return ret;
}
exports.setupCSS = function(paths) {
return {
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: paths
}
]
}
};
}
exports.minify = function() {
return {
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true
},
mangle: {
props: /matching_props/,
except: [
'Array', 'BigInteger', 'Boolean', 'Buffer'
]
}
})
]
};
}
exports.setFreeVariable = function(key, value) {
const env = {};
env[key] = JSON.stringify(value);
return {
plugins: [
new webpack.DefinePlugin(env)
]
};
}
exports.extractBundle = function(options) {
const entry = {};
entry[options.name] = options.entries;
return {
entry: entry,
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: [options.name, 'manifest'],
minChunks: Infinity
})
]
};
}
exports.clean = function(path) {
return {
plugins: [
new CleanWebpackPlugin([path], {
root: process.cwd()
})
]
};
}
exports.extractCSS = function(paths) {
return {
module: {
loaders: [
// Extract CSS during build
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: paths
}
]
},
plugins: [
// Output extracted CSS to a file
new ExtractTextPlugin('[name].[chunkhash].css')
]
};
}