最近我开始研究简单的
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/
}
]
}
};
我使用角度2.0.0-beta.0和webpack 1.12.2
解决方法
更新：考虑
cache option.
你的问题的答案是：是的.您可以使用多个入口点.
这是我正在使用的一个例子.
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';
<script src="dist/common.js"></script> <script src="dist/vendor.js"></script> <script src="dist/app.js"></script>
您可能必须调整一些路径以正确连接,具体取决于index.html文件相对于其他文件夹的位置.
但是,我认为,这将为你做到.检查Github项目以查看它的运行情况.
