更新:考虑使用cache选项。
回答您的问题是:可以。您可以使用多个入口点。
这里是一个我正在使用的示例。
var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var ProvidePlugin = webpack.ProvidePlugin;
module.exports = {
devtool: 'source-map',
debug: true,
cache: true,
entry: {
'vendor': './src/vendor.ts',
'app': './src/app/app.ts'
},
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,
2300,
2374,
2375
]
},
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
{test: /\.json$/, loader: 'json-loader'},
{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"
})
],
tslint: {
emitErrors: true,
failOnHint: false
},
devServer: {
contentBase: 'src',
publicPath: '/__build__',
colors: true,
progress: true,
port: 3000,
displayCached: true,
displayErrorDetails: true,
inline: true
}
};
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项目,看它在实际操作中的表现。
cache
配置选项?由于我不知道哪个部分实际上拖慢了你的计算机速度,所以诊断有点困难。但这也可能会有所帮助:https://webpack.github.io/docs/configuration.html#cache - Michael Orylcache: true
,但编译仍然需要很长时间(“Compiled successfully in 62288ms” - 62秒),其中一个依赖项是 513 KB 的 libsodium.js。文档没有描述我做错了什么或为什么我误解了:https://webpack.js.org/configuration/other-options/#cache。似乎再次运行npm run production
不应该需要太多时间,因为库应该已经完全缓存了。 - Ryan