在Angular 5项目中添加"webpack.config.vendor.js"文件,可以通过以下步骤完成:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
vendor: [
'rxjs',
'@angular/core',
'@angular/common',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// 添加其他需要打包的第三方库
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
library: '[name]_[hash]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, 'dist', '[name]-manifest.json')
})
]
};
在entry中,添加需要打包的第三方库,例如rxjs和Angular的核心模块。你可以根据项目的需求添加其他需要打包的第三方库。
"options": {
"vendorChunk": false
}
"scripts": {
"build:vendor": "webpack --config webpack.config.vendor.js",
"build": "ng build && npm run build:vendor"
}
npm run build
<script src="vendor.bundle.js"></script>
这样,你就成功地在Angular 5项目中添加了"webpack.config.vendor.js"文件,并将第三方库打包成了"vendor.bundle.js"文件。这样做的好处是可以减小主要bundle的大小,提高应用的加载速度。
领取专属 10元无门槛券
手把手带您无忧上云