用於生產部署的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);

所以，當我使anggular 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）;

其中環境通過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允許您創建可在編譯時配置的全局常量。 這對於允許開發構建和發布構建之間的不同行為非常有用。 例如，您可以使用全局常量來確定是否進行日志記錄; 也許您在開發構建中執行日志記錄，但在發布版本中不執行。 這就是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的每個密鑰都是一個標識符或與...連接的多個標識符。

• 如果值是字符串，則它將用作代碼片段。
• 如果該值不是字符串，則將進行字符串化（包括函數）。
• 如果值是對象，則所有鍵的定義方式相同。
• 如果將typeof作為密鑰的前綴，則僅為typeof調用定義。

這些值將內聯到代碼中，該代碼允許縮小傳遞以移除冗余條件。

例

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

資源

Webpack Seed

Answer 3

現在這里是我如何縮小它的生產，它是一個手工工作，但至少，現在，它的工作。 在config中添加了minimize參數，你將在運行觀察webpack --watch --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);