如何设置Webpack，使其不必每次都重新编译Angular？

Question

如何设置Webpack，使其不必每次都重新编译Angular？

5

最近，我开始制作一个简单的HTML5画布游戏+Angular2应用程序，可以进行路由、显示高分等。由于我不想触及Angular2核心，我希望不要重新编译所有内容并将它们打包成一个大文件。更好的方法是将Angular2核心、HTTP和路由器，以及我的应用程序放在不同的文件中。

现在，我得到了将近5MB的捆绑包，还有更大的.map文件，这使得我的电脑在浏览器加载时暂停了一小段时间(鼠标卡住了，音乐停了半秒钟)，非常令人恼火(我猜这是因为捆绑包大小)。我能使用多个入口点来解决这个问题吗？

以下是我的Webpack配置：

module.exports = {
  devtool: 'source-map',
  entry: './src/app/bootstrap',
  output: {
    path: __dirname + '/dist', publicPath: 'dist/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [
      {
        test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
      }
    ]
  }
};

我正在使用Angular 2.0.0-beta.0和Webpack 1.12.2。

- Eggy

2个回答

0

针对一个快速的短期修复：当我尝试使用webpack与Angular 2 5分钟快速入门指南时，我所做的就是直接在HTML中包含供应商脚本文件，几乎像教程一样，除了我不需要system.js来设置webpack，因此我不包括它，但我确实需要webpack生成的'bundle.js'。

<body>

<my-app></my-app>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="bundle.js"></script>

</body>

有了这个webpack配置，它只会打包我的自定义模块：

var webpack = require("webpack");

module.exports = {
  entry: './src/boot.ts',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  plugins: [
    new webpack.IgnorePlugin(/angular2/)
  ]
};

- EricC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Oryl · Accepted Answer

更新：考虑使用cache选项。

回答您的问题是：可以。您可以使用多个入口点。

这里是一个我正在使用的示例。

var path = require('path');

var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var ProvidePlugin = webpack.ProvidePlugin;
//var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    devtool: 'source-map',
    debug: true, // set false in production
    cache: true,

    entry: {
        'vendor': './src/vendor.ts', // third party dependencies
        'app': './src/app/app.ts' // our app
    },

    output: {
        path: root('dist'),
        filename: '[name].js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js',
        pathinfo: true
    },

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.html']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                query: {
                    'ignoreDiagnostics': [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375  // 2375 -> Duplicate string index signature
                    ]
                },
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },

            // Support for *.json files.
            {test: /\.json$/, loader: 'json-loader'},

            // support for .css
            {test: /\.css$/, loaders: ['style', 'css']},
        ],
        noParse: [/angular2-polyfills/]
    },

    plugins: [
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}),
        new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor']}),
        new ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Cookies: "js-cookie"
        })
//        new UglifyJsPlugin() // use for production
    ],

    // Other module loader config
    tslint: {
        emitErrors: true,
        failOnHint: false
    },
    // our Webpack Development Server config
    devServer: {
        contentBase: 'src',
        publicPath: '/__build__',
        colors: true,
        progress: true,
        port: 3000,
        displayCached: true,
        displayErrorDetails: true,
        inline: true
    }
};

// Helper functions
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

function rootNode(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
}

这份配置比你的复杂一些。它来自于这个使用Webpack的Angular 2 / Bootstrap 4 / OAuth2 Github项目。

这将把Angular相关的内容（以及RxJS和其他任何东西）放入一个“vendor”捆绑包中，但是你需要创建一个vendor.ts文件来调用你所需的内容。

vendor.ts:

require('./css/bootstrap.css');
require('./css/main.css');

import 'angular2/bundles/angular2-polyfills';

import 'angular2/platform/browser';
import 'angular2/core';
import 'angular2/http';
import 'angular2/router';

然后在你的index.html文件底部添加以下代码。

<script src="dist/common.js"></script>
<script src="dist/vendor.js"></script>
<script src="dist/app.js"></script>

根据你的index.html文件与其他文件夹的关系，你可能需要调整一些路径以正确连接。

但我认为这样就足够了。查看Github项目，看它在实际操作中的表现。