How to export webpack bundle as a global script (not module)?

Question

I have 2 files, a.js and b.js:

a.js:

function hello() {
    alert('hey');
    alert('bye');
}

b.js:

const name = 'Bob';
alert(name)

I import them both in my entry file:

import './a';
import './b';

I want to combine them, my webpack.config.js looks like this:

const path = require('path');

module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

When I run webpack I get a module:

// etc...

/***/ (function(module, exports) {

function hello() {
    alert('hey');
    alert('bye');
}

/***/ }),
/* 2 */
/***/ (function(module, exports) {

const name = 'Bob';
alert(name)

/***/ })
/******/ ]);

Instead how can I just get:

function hello() {
    alert('hey');
    alert('bye');
}

const name = 'Bob';
alert(name)

This plugin does what I want to achieve but there is a bug where I can't minify the combined file, on top of that I would also like to run babel to transform the code to be es5 compatible. All these things seem to be a lot easier to do the regular webpack way so it would be great if I can just get webpack to export a normal script instead of a module..

It's unclear what u want, but what about this: https://stackoverflow.com/a/40416826/2581562 — Legends, Jun 21 '20 at 07:53

score 1 · Accepted Answer · answered Jun 22 '20 at 21:40

I ended up using gulp for this, it was pretty simple. Here's what my gulpfile.js looks like:

const gulp = require('gulp');
const { watch } = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

const defaultTask = (cb) => {
  return gulp
    .src([
      'src/file1.js',
      'src/file2.js',
      'src/file3.js',
      // etc...
    ])
    .pipe(concat('bundle.min.js'))
    .pipe(
      babel({
        presets: ['@babel/preset-env']
      })
    )
    .pipe(terser())
    .pipe(gulp.dest('dist'));
  cb();
};

exports.default = defaultTask;

This will concatenate, minify and transpile es6 to es5 and save the output in dist/bundle.min.js as is without changing the script to a module.

yeerk · Answer 2 · 2020-06-21T15:18:00.703

0

You can do this by setting the libraryTarget to var. This will still emit the webpack wrapper code, but it will evaluate your entry point and assign the exports of your entry point to a variable based on the value of library.

module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'YourLibraryNameHere'
  }
};

edited Jun 21 '20 at 15:18

answered Jun 21 '20 at 05:14

yeerk

2,103
18
16

1

This doesn't seem to make any difference, I built 2 bundles one with `libraryTarget` and one without and the output is identical (confirmed via diff) – Jun 21 '20 at 05:19
Perhaps I misunderstood, do you want to complete remove all of the webpack wrapper code? I do not believe that is possible with webpack, but you might want to look into compiling with TypeScript (JavaScript is valid TypeScript, so with the correct settings you don't need to change any code). See https://stackoverflow.com/questions/34474651/typescript-compile-to-single-file . – yeerk Jun 21 '20 at 05:28
I changed my answer slightly so that the result of the module is assigned to a variable. This might not be what you want, but it is probably as close as you will get to having your module act like a global script. You can then access that variable from other scripts, the variable containing all of the exports of your entrypoint file. – yeerk Jun 21 '20 at 15:21
Can you just import "a.js" in "b.js"? – Alex Nepsha Jun 22 '20 at 21:49

How to export webpack bundle as a global script (not module)?

2 Answers2