ES6 Angular 1.X + Webpackの生産ビルドは巨大です（1.8メガ）

Question

私はES6/Angular 1.X &ウェブパックで実験しています。私は複製しました&は、このレポに若干の改造を加えました：https://github.com/geniuscarrier/webpack-angular-es6

アプリがうまくいきます。しかし、プロダクションのために時間が来ると、結果として得られるbundle.jsファイルはほぼ2メガです。

私はいくつかのSOの投稿を行っており、提案された戦略のいくつかを実装しており、何も動作していないようです。

誰でも共有できる洞察はありますか？とても感謝しております。

は、ここに私のpackage.jsonです：

{ 
    "name": "Webpack-Angular", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
     "test": "npm run lint && NODE_ENV=test ./node_modules/.bin/karma start", 
     "lint": "./node_modules/.bin/eslint app", 
     "dev": "./node_modules/.bin/webpack-dev-server --content-base app", 
     "build": "NODE_ENV=production webpack -p && cp app/index.html build/index.html && cp -r app/images build/images" 
     }, 
     "author": "", 
     "license": "ISC", 
     "devDependencies": { 
      "angular": "^1.5.5", 
      "angular-mocks": "^1.5.5", 
      "angular-sanitize": "^1.5.5", 
      "angular-ui-router": "^0.2.18", 
      "autoprefixer-loader": "^3.2.0", 
      "babel-core": "^6.7.7", 
      "babel-loader": "^6.2.4", 
      "babel-preset-angular": "^6.0.15", 
      "babel-preset-es2015": "^6.6.0", 
      "bootstrap": "^3.3.6", 
      "chai": "^3.5.0", 
      "css-loader": "^0.23.1", 
      "eslint": "^2.2.0", 
      "file-loader": "^0.8.5", 
      "font-awesome": "^4.5.0", 
      "jquery": "^2.2.3", 
      "karma": "^0.13.22", 
      "karma-chai": "^0.1.0", 
      "karma-chrome-launcher": "^0.2.3", 
      "karma-mocha": "^0.2.2", 
      "karma-webpack": "^1.7.0", 
      "mocha": "^2.4.5", 
      "ng-annotate-loader": "^0.1.0", 
      "ng-resource": "^1.3.2", 
      "node-sass": "^3.6.0", 
      "raw-loader": "^0.5.1", 
      "sass-loader": "^3.2.0", 
      "style-loader": "^0.13.1", 
      "toastr": "^2.1.2", 
      "url-loader": "^0.5.7", 
      "webpack": "^1.13.0", 
      "webpack-dev-server": "^1.14.1" 
     } 
    } 

そして、ここでのWebPACKの設定です：

var DefinePlugin = require('webpack').DefinePlugin; 
var ProvidePlugin = require('webpack').ProvidePlugin; 
var optimize = require('webpack').optimize; 

var definePlugins = new DefinePlugin({ 
    TEST: process.env.NODE_ENV === 'test', 
    PRODUCTION: process.env.NODE_ENV === 'production' 
}); 
var providePlugins = new ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    'windows.jQuery': 'jquery', 
}); 

var config = { 
    context: __dirname + '/app', 
    entry: './index.js', 
    output: { 
     path: __dirname + '/app', 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /(node_modules)/, 
      loader: 'ng-annotate!babel' 
     }, { 
     test: /\.s?css$/, 
     exclude: /(node_modules)/, 
     loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'] 
    }, { 
     test: /\.html$/, 
     loader: 'raw' 
    }, { 
     test: /\.(jpe?g|png|gif)$/, 
     exclude: /(node_modules)/, 
     loader: 'url?limit=10000' 
    }, { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url?limit=10000&minetype=application/font-woff' 
    }, { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url' 
    }] 
}, 
plugins: [ 
    definePlugins, 
    providePlugins 
], 
resolve: { 
    extensions: ['', '.js', '.css'] 
} 
}; 

if (process.env.NODE_ENV === 'production') { 
    config.output.path = __dirname + '/build'; 
    config.plugins.push(new optimize.UglifyJsPlugin()); 
} 

module.exports = config; 

はありがとうございます。

Answer 1

ウェブパック2では、設定のresolve.extensionsを変更できます。デフォルトではモジュールの解像度は次のようになります： `[" .js "、" .json "]、これに変更することができます：[" .min.js "、" .js "、" .json]最初にファイルを作成し、バンドルのサイズを小さくする