We Keep Coding

bundling multiple js files

in react using webpack every js files is bundle into a single bundle.js , for my normal html , css, js application for example , i am having 6 libraries. for an example consider
i am using jquery and bootstrap min versions. so if i reference two files the request will be two. so how can i make it into a single file. So there will be a single request.
like when i checked the file size is about in kb's and the request is processed within less that 1 or 2 seconds , like the chrome dev tools shows the time for to load also it parrallely loads the two files.
But how can i bundle the two librarys using webpack and get a single file that i can refer in my application.
i am a beginner to webpack

You need to import them in your entry point file and Webpack will handle the bundling. As you have worked with React, I assume you have basic command line skills.
You can read the Getting Started guide which bundles Lodash like how you are trying to bundle jQuery and Bootstrap.
First of install, ensure that you are installing jQuery, Bootstrap, and any other libraries using npm (or yarn, if you prefer):
# Install Webpack as a dev dependency
npm install webpack webpack-cli --save-dev
# Install dependencies (I've added Popper.js as Bootstrap requires it)
npm install jquery bootstrap popper.js
Create a folder called src and a file inside there called index.js. This is your entry point and Webpack will look for this file unless configured differently. Import the libraries like this:
import $ from 'jquery'
import 'bootstrap'
// Do something with jQuery
$(document).ready(() => console.log('Hello world!'))
Then run Webpack using npx:
npx webpack
A file named main.js should be created in a folder called dist that contains the bundled code. This is your output file. You can use a <script> tag in your HTML file to load this JavaScript:
<!-- assuming your index.html is in the dist folder -->
<script src='main.js'></script>
Once you get here, you can explore more advanced things like importing Bootstrap components individually, minifying code, multiple bundles, transpiling TypeScript, etc.
You will likely need to add a Webpack configuration file very soon as there is only so much that can be done using zero-config mode.

Good practice is to keep two sepearate bundles for the application logic and external libraries and in webpack this can be achieved by the following code,
app.js - appliation index file,
vendors.js - import all external libraries in this file
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
To get a single file, import vendors.js file inside app.js file and give entry key in webpack as
entry: './src/app.js'

Let us assume that you have the files in src directory. You can merge multiple files by specifying them in webpack.config.js to have a single named file as an output. I hope this is what you are looking for.
const path = require('path');
module.exports = {
entry: {
'bundle.js': [
path.resolve(__dirname, 'src/file1.js'),
path.resolve(__dirname, 'src/file2.js')
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
exclude: /node_modules/
}]
}
};
As above, the two files "file1.js" and "file2.js" will be combined into a single file "bundle.js" and stored in "dist" directory.
You can also exclude node_modules by specifying a rule in module object of webpack configuration.

How to bundle js files in none node environment?

I'm developing websites with several js files and I want to bundle these js files into one js file. I started looking at Webpack, but it requires node environment to run. In fact, all my js files are none-node style, and each one of them is independent. My development environment is not node, so I'm wondering how to make all my js files into one js file.

Your js files do not need to be written as CommonJS modules ("node style") in order to bundle them with webpack.
If you want you can use loaders like the imports-loader and exports-loader to make scripts not written as CommonJS modules accessible in a webpack context.
However, it sounds like you may not even need webpack for your use case.
I would recommend using a simple gulp recipe to concatenate and minify your existing JavaScript files into a single file.
const concat = require('gulp-concat')
const gulp = require('gulp')
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
gulp.task('default', function () {
// Find all the JavaScript files in the src directory.
return gulp.src('src/*.js')
// Concatenate them all together and name the resulting sciprt app.js.
.pipe(concat('app.js'))
// Minify the script to save space.
.pipe(uglify())
// Change the file extension.
.pipe(rename({ extname: '.min.js' }))
// Output to the dist directory.
.pipe(gulp.dest('dist/'))
})

Output .map files for typescript to specific folder in IntelliJ IDEA

I configured my IntelliJ IDEA to compile all .ts file to specific folder. Here's the configuration:
It works just fine. Here's my folder structure:
js/
| - typescript/
| - __test.ts
| - __test.js
| - __test.js.map
| - otherfile.js
The problem is that it outputs the .map files to the same folder as .js files. Since I'll be having a lot of .js files, the folder will look cluttered.
Is there a possibility to make IntelliJ IDEA to output .map files to a specific folder? I couldn't find any info about that...
Thank you!

tsc compiler doesn't have options for this - .map files, when generated, are always placed to the same folder as .js files.
See https://www.typescriptlang.org/docs/handbook/compiler-options.html for the list of available options.
if you like to move generated files to a different location, you can use build tools like Gulp, Grunt or Webpack. But, if you go this way, make sure that sourcemaps URL is properly generated (you need using --mapRoot cli option that controls the reference to the map file in the .js file to let the debugger know where to look for sourcemaps).
see TypeScript tsconfig Output files in certain folders, for example

in the Typescript Compiler options... I added --outDir ./.map. This affects both .js and .js.map files.

webpack - require script in index.js file without parsing

I'm using webpack with babel-loader to organize my webdriverio scripts. Since I'm writing automated web-site testing scripts, I don't have a production environment per-se, so the point of using webpack is really just to organize my code chunks better and transpile my es6 code to es5 since node does not allow all es6 features.
I have a script: "../../../external/file-search.js" which I am requiring at the top of an index.js file. The point of file-search.js is to search through the directory and require all files in that directory using fs. This is what my index.js file looks like (located in ~/tasks/):
var fileSearch = require("../../../external/file-search.js");
var d = __dirname;
fileSearch(d);
when I run "webpack tasks test.js" webpack compiles file-search.js into my "test.js" file rather than requiring file-search.js and allowing me to use it's exported method in my index.js file. I will use file-search.js in all my index.js files so it's important to include it as a module. I've tried using externals but as far as I know, externals simply exclude certain modules from being compile/transpiled and try to bundle them into the final script. I actually want to require that script and use it right away in my index.js file. How can I require file-search.js and use it right away as part of my index.js file?

TypeScript compile all ts files as a single JavaScript file in WebStorm 7

I have a lot of .ts files in my project. WebStorm build each .ts file as a js file. But I dont want that.
I have an app.ts file and all other .ts files will be build in that app.ts file. How can I do that in WebStorm 7?
There is a solution in CLI mode but how can i implement it in WebStorm?
tsc --out app.js main.ts app.ts a.ts b.ts
Or is there a better way to do this?
ANSWER
Just added this line at Arguments section in Edit Watcher
--sourcemap $FileName$ --out your-main.js

You can specify --out option in Typescript File watcher arguments, and, if 'track only root files' option is on, all ts files will be merged into a main js file (that imports them all directly or via references chain) on modifying any of them

You could use grunt-ts which can maintain a reference.ts file for you, and point the webstorm file watcher to run your grunt task https://github.com/basarat/grunt-ts#javascript-generation-and-ordering
Disclaimer : I am one of the authors of grunt-ts.

For those who don't have a single file that links to all other ones and they don't want to maintain manually "references.ts" or using basarat's grunt-ts, here's my setup:
The basic idea is to list all your *.ts files into a text file and then use the file as a patameter for the tsc compiler. So I created my own file watcher and disabled the default one for TypeScript files. My file watcher's program is a bat file with following content:
dir /s /b /o:gn scripts\*.ts > ts_sources.txt
tsc %*
If you're on Mac or Linux you can easily transform this into a bash script.
On the watcher's setup screen you point to your batch file (bash script):
$ProjectFileDir$\compile.bat
and as your arguments you can have to use following:
#$ProjectFileDir$\ts_sources.txt --out $ProjectFileDir$\app_all.js --sourcemap
I guess there are many ways to do it...