我想了解如何将多个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'
}
}
]
