Question

我想缩小我所有的js＆amp;使用webpack进行生产部署的CSS＆amp;当我开始在开发模式下工作时，它应该得到美化，我是webpack＆amp;不知道我是如何做到这一点的，下面是我的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＆amp; 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文件。

webpack.common.js
webpack.dev.js
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 calls定义。

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

实施例

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

用于生产部署的Angular 2 + Webpack

3 个答案:

使用webpack和webpack.DefinePlugin

DefinePlugin

实施例

实施例