我想了解如何将多个bundle.js文件(例如main.bundle.js,scripts.bundle.js等)(数量为5个)合并到一个bundle.js文件中,并在index.html中创建引用.我正在使用angular-cli,它依次使用webpack.
我能够使用单独的npm模块合并文件,但不使用webpack配置.
解决方法
试试这些标志
ng build –aot –prod –bo –sm –vendor-chunk = false –output-hashing = none
我发现here
还有一个易于使用的webpack combiner plugin,你应该检查,例如:
- var webpack = require('webpack');
- var path = require('path');
- var ExtractTextPlugin = require('extract-text-webpack-plugin');
- var MergeFilesPlugin = require('merge-files-webpack-plugin');
- module.exports = {
- entry: {
- 'entry1': './tests/test1/src/entry1/index.js','entry2': './tests/test1/src/entry2/index.js'
- },output: {
- path: path.join(__dirname,'./tests/test1/public'),filename: 'all-bundled.js'
- },module: {
- rules: [
- {
- use: ExtractTextPlugin.extract({
- use: 'css-loader'
- }),test: /\.css$/,exclude: /node_modules/
- }
- ]
- },plugins: [
- new ExtractTextPlugin({
- filename: '[name].style.css'
- }),new MergeFilesPlugin({
- filename: 'css/style.css',test: /style\.css/,// it could also be a string
- deleteSourceFiles: true
- })
- ]
- }
但那将是你似乎反对的另一个npm模块.目前尚不清楚你究竟在问什么,因为你没有给出你尝试过的例子,或者你运行的构建命令.
还有一些叫做multicompiler的东西你应该看看.
- [
- {
- entry: './app.js',output: {
- filename: 'app.js'
- }
- },{
- entry: ['es5-shim','es5-shim/es5-sham','es6-shim','./vendor/polyfills.js'],output: output: {
- filename: 'concated.js'
- }
- }
- ]