Angular 2 + Webpack用于生产部署 [英] Angular 2 + Webpack for production deployment

问题描述

我想缩小我的所有js&使用webpack进行我的生产部署和CSS的CSS当我以开发模式开始工作时，应该很漂亮，我是webpack& amp;的新手.不知道如何进行这项工作，以下是我的webpack配置，如何修改它以单独进行开发和开发?生产环境?

I wanted to minify all my js & CSS using webpack for my production deployment & when I start work in development mode it should get prettify, I am new to webpack & not sure how I make this work, below is my webpack config, how I can modify it to work separately for development & production environment?

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);

因此，当我启用摘要2 enableProduction时，webpack还应调用生产代码并最小化JS& CSS

So when I enable anggular 2 enableProduction webpack should also call production code and minify JS & CSS

推荐答案

使用webpack和webpack.DefinePlugin

设置不同的环境模式.

最佳实践是针对每个环境使用不同的文件，以便于维护，并根据环境进行不同的配置.我已经创建了angular2 webpack种子，在config文件夹中可以找到webpack文件.

Set different Environment mode with webpack and webpack.DefinePlugin

Best practice to have different files for each environment so it's easy to maintain and have different configuration depends on environment. I have created a angular2 webpack seed and there in config folder you can find webpack files.

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

DefinePlugin

DefinePlugin允许您创建可以在编译时配置的全局常量.这对于在开发版本和发行版本之间允许不同的行为非常有用.例如，您可以使用全局常量来确定是否进行日志记录.也许您在开发版本中执行日志记录，而不在发布版本中执行日志记录.这就是DefinePlugin支持的一种情况.

DefinePlugin

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be very useful for allowing different behaviour between development builds and release builds. For example, you might use a global constant to determine whether logging takes place; perhaps you perform logging in your development build but not in the release build. That’s the sort of scenario the DefinePlugin facilates.

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

传递给DefinePlugin的每个键是一个或多个与..联接的标识符.

Each key passed into DefinePlugin is an identifier or multiple identifiers joined with ..

• 如果值是字符串，它将用作代码片段.
• 如果该值不是字符串，它将被字符串化(包括函数).
• 如果值是一个对象，则所有键的定义方式都相同.
• 如果将typeof作为键的前缀，则仅针对typeof调用进行定义.

这些值将内联到代码中，从而允许最小化操作删除多余的条件.

The values will be inlined into the code which allows a minification pass to remove the redundant conditional.

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

来源

Webpack种子

这篇关于Angular 2 + Webpack用于生产部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！