Angular 2 + Webpack 用于生产部署

Question

我想使用 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

Answer 1

你可以创建一个 webpack.config.production.js，然后在主 webpack.config.js 中你可以像这样导入生产配置：

var environment = process.env.NODE_ENV ? process.env.NODE_ENV：“本地”； var envSpecificConfig = require('./webpack.config.' + environment);

其中 environment 由 gulp 或您的构建服务器或通过其他方式设置为环境变量。

所以原则上，所有常见的配置都会进入 webpack.config.js，而生产的东西会进入 webpack.config.production.js。

此处的示例配置（首先是 webpack.config.js）：

var path = require('path');
var webpack = require('webpack');
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : "local";
var envSpecificConfig = require('./webpack.config.' + environment);

module.exports = merge({

...all your standard stuff you already have here

}, envSpecificConfig);

然后在 webpack.config.production.js 中

var webpack = require('webpack');
var path = require( 'path' );

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            minimize: true,
            mangle: false // Due to https://github.com/angular/angular/issues/6678
        })
    ]
};

这样您可以拥有任意数量的环境特定配置，您只需设置环境变量以匹配配置文件名。

Answer 2

使用 webpack 和 webpack.DefinePlugin 设置不同的环境模式

最佳做法是为每个环境使用不同的文件，以便易于维护，并根据环境进行不同的配置。我创建了一个 angular2 webpack 种子，在 config 文件夹中你可以找到 webpack 文件。

1. webpack.common.js
2. webpack.dev.js
3. webpack.prod.js

定义插件

DefinePlugin 允许您创建可以在编译时配置的全局常量。这对于允许开发构建和发布构建之间的不同行为非常有用。例如，您可以使用全局常量来确定是否发生日志记录；也许您在开发版本中执行日志记录，而不是在发布版本中。这就是 DefinePlugin 所促成的场景。

示例

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

传递给 DefinePlugin 的每个键都是一个标识符或多个用 .. 连接的标识符

• 如果值是字符串，它将被用作代码片段。
• 如果值不是字符串，它将被字符串化（包括函数）。
• 如果值是对象，则所有键的定义方式都相同。
• 如果您在 key 前加上 typeof 前缀，则它只为 typeof 调用定义。

这些值将被内联到代码中，从而允许缩小传递以删除多余的条件。

示例

if (!PRODUCTION)
    console.log('Debug info')
if (PRODUCTION)
    console.log('Production log')

Source

Webpack Seed

Answer 3

现在，我是如何将其缩小以用于生产，这是一项手工工作，但至少目前，它正在完成这项工作。在配置中添加了minimize 参数，您将在运行观察程序时放置该参数，即webpack --watch --minimize，下面是代码：

...
var path = require('path');
var minimize = process.argv.indexOf('--minimize') !== -1;

...
...
...

if (minimize) {
  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin());
}
var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);