ES6 Angular 1.X + Webpack 生产构建是巨大的（1.8 兆）答案

【问题标题】：ES6 Angular 1.X + Webpack production build is huge (1.8 megs)ES6 Angular 1.X + Webpack 生产构建是巨大的（1.8 兆）
【发布时间】：2016-10-21 16:20:51
【问题描述】：

我一直在试验 ES6 / Angular 1.X 和 webpack。我克隆了这个仓库并做了一些小修改：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;

谢谢。

【问题讨论】：

标签： angularjs webpack

【解决方案1】：

在 webpack 2 上，您可以更改配置中的 resolve.extensions。默认情况下，模块解析如下所示：`[".js", ".json"]，你可以更改为：[".min.js", ".js", ".json] 并且 webpack 将 source min文件优先；减小捆绑包的大小。

【讨论】：