最近我开始研究简单的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
答案 0 :(得分:6)
更新:考虑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', '.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 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项目以查看它的运行情况。
答案 1 :(得分:0)
对于一个简短的快速修复:当我尝试将webpack与Angular 2 5 min quickstart guide一起使用时,我刚刚执行了以下操作:我在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/)
]
};