How to bundle js files in none node environment?

Question

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.

Answer 1

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/'))
})