我希望使用Webpack来压缩所有JS和CSS文件以进行生产部署,但在开发模式下应该是格式化的。由于我对Webpack不熟悉,不确定如何使其工作。以下是我的Webpack配置,请问我如何修改它以便为开发和生产环境分别工作?
var webpack = require('webpack');
var path = require('path');
// Webpack Config
var webpackConfig = {
entry: {
'polyfills': './src/polyfills.browser.ts',
'vendor': './src/vendor.browser.ts',
'main': './src/main.browser.ts',
},
output: {
path: './dist',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
],
module: {
loaders: [
// .ts files for TypeScript
{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.json$/, loader: 'json-loader' },
]
}
};
// Our Webpack Defaults
var defaultConfig = {
devtool: 'cheap-module-source-map',
cache: true,
debug: true,
output: {
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
// these packages have problems with their sourcemaps
path.join(__dirname, 'node_modules', 'rxjs'),
path.join(__dirname, 'node_modules', '@angular2-material'),
path.join(__dirname, 'node_modules', '@angular'),
]
}
],
noParse: [
path.join(__dirname, 'node_modules', 'zone.js', 'dist'),
path.join(__dirname, 'node_modules', 'angular2', 'bundles')
]
},
resolve: {
root: [ path.join(__dirname, 'src') ],
extensions: ['', '.ts', '.js', '.json']
},
devServer: {
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 }
},
node: {
global: 1,
crypto: 'empty',
module: 0,
Buffer: 0,
clearImmediate: 0,
setImmediate: 0
},
}
var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);
当我启用Angular 2 enableProduction
时,webpack也会调用生产代码并压缩JS和CSS。
process.env
键下来实现:https://stackoverflow.com/questions/47898424/environment-based-properties-for-angular-2-app-served-by-webpack/47925780#47925780 - IcedDante