如何设置webpack以便每次都不重新编译角度？

你的问题的答案是：是的.您可以使用多个入口点.

这是我正在使用的一个例子.

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','.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 project.

这会将Angular的东西(以及RxJS和其他任何东西)放在“供应商”包中,但你必须制作一个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项目以查看它的运行情况.