I want to understand how to merge multiple bundle.js files like main.bundle.js, scripts.bundle.js etc.(5 in number) into a single bundle.js file and make the reference in the index.html created. I am using angular-cli which uses webpack in turn.
I was able to merge the files using a separate npm module but not using webpack configuration.
You determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js. Do this
entry: {
app: 'src/app.ts',
vendor: 'src/vendor.ts'
},
output: {
filename: 'app.js'
}Both app.ts and vendor.ts will be merged into app.js . If you want to keep them seperate do
entry: {
app: 'src/app.ts',
vendor: 'src/vendor.ts'
},
output: {
filename: '[name].js'
}Hope this helps.
You have an entry file, for example app.js.
Then you can have a configuration file for webpack to know what to do named webpack.config.js and inside the webpack config file you address the entry point of your application which is the app.js
At the minimum configuration of the webpack you can have somthing like this :
// Path Module for relative addressing
const path = require('path');
// Webpack Configuration
module.exports = {
entry : './src/app.js',
output : {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module : {
rules : [
{
test: /\.js$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
]
},
]
},
}You need to set the proper loader for angular in order to compile your code, for example typescript or ...
And then in the app.js (the entry point of your application)
// Importing libs
import $ from 'jquery';
// Import jQuery plugins
window.ionRangeSlider = require('ion-rangeslider');
window.remodal = require('remodal');
// Importing several js modules or components
require('./js/utils');
require('./js/general');
// ...
// Import sass files
// NOTE: In order to compile sass or css you need to set the loader in the webpack.config.js file
require('./scss/styles.scss');
// AND WHATEVER YOU WANT YOU CAN IMPORT HEREAnd when you tell the webpack to compile your codes, it starts with your entry point and compile all the assets you included in app.js and export a single file named app.bundle.js
I hope it helped ;)
Try these flags
ng build --aot --prod --bo -sm --vendor-chunk=false --output-hashing=none
I found that here
There is also an easy to use webpack combiner plugin that you should check out, example:
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
})
]
}
But that would be another npm module which you seem to be against. It is not clear exactly what you are asking as you didn't give examples of what you had tried, or the build commands you ran.
There's also something called multicompiler you should check out.
[
{
entry: './app.js',
output: {
filename: 'app.js'
}
},
{
entry: ['es5-shim', 'es5-shim/es5-sham', 'es6-shim', './vendor/polyfills.js'],
output: output: {
filename: 'concated.js'
}
}
]
entry1 and entry 2.. . No one is here to do your work entirely for you
entry: { app: ['src/app.ts', 'src/vendor.ts'] }, output: { filename: 'everything.js' }