javascript - 在生产环境中，Webpack 2.2.0.rc-0 将丑化/缩小vendor.js和manifest.js，但不会丑化/缩小bundle.js

Question

我试图找出为什么我的 vendor 和 list 文件被缩小和丑化，但我的 bundle 却没有。难道是插件顺序的问题？也许与 CommonsChunkPlugin 有关？

这是我的 UglifyJsPlugin 代码:

    new webpack.optimize.UglifyJsPlugin({
      debug: false,
      minimize: true,
      sourceMap: false,
      output: {
        comments: false
      },
      compressor: {  // eslint-disable-line camelcase
        warnings: false,
        unused: true,
        dead_code: true
      },
      mangle: false
    }),

这是我的 webpack 配置对象的一个​​整体:

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const del = require('del');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');


module.exports = {
  entry: {
    bundle: `./${conf.path.src('index')}`,
    vendor: `./src/app/dependencies`,
  },
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /.json$/,
        use: ['json-loader']
      },
      {
        test: /.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: ['tslint-loader']
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'ng-annotate-loader',
          'babel-loader'
        ]
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ['ts-loader']
      },
      {
        test: /.html$/,
        use: ['html-loader']
      },
      {
        test: /\.(jade|pug)$/,
        use: ['pug-html-loader']
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
        use: ['url-loader?limit=30000&name=[name]-[hash].[ext]']
      },
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    
    new webpack.optimize.UglifyJsPlugin({
      debug: false,
      minimize: true,
      sourceMap: false,
      output: {
        comments: false
      },
      compressor: {  // eslint-disable-line camelcase
        warnings: false,
        unused: true,
        dead_code: true
      },
      mangle: false
    }),

    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),

    new webpack.optimize.OccurrenceOrderPlugin(),
    // new webpack.NoErrorsPlugin(), // emits no scripts to browser if there are any errors at all
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html'),
      inject: true
    }),

    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      conf.paths.src
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer],
        resolve: {},
        ts: {
          configFileName: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      }
    }),
    new CopyWebpackPlugin([{
        from: path.join(conf.paths.src, 'integration', 'embedder', 'embedder.js'),
        to: path.join('integration', 'embedder', 'embedder.js')
    }])
  ],
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  }
};

Answer 1

事实证明，答案是向 babel-loader 添加一个选项配置以包含预设 es2015:

  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ng-annotate-loader'
      },
      {
        loader: 'babel-loader',
        options: {
          presets: ['es2015'],
        }
      }
    ]
  },

这是使用 webpack 2 丑化/缩小 es6 代码所必需的。