在生產中，Webpack 2.2.0.rc-0將丑化/縮小vendor.js和manifest.js，但不會bundle.js

Question

我試圖弄清楚為什么我的供應商和清單文件會被縮小和丑化，而我的捆綁包卻沒有。 可能是插件的順序嗎？ 也許與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代碼時需要使用此功能。