Webpack.js

Minify javascript module with Webpack

I setup a simple node project with webpack requirements like this:

{
  "name": "word-detective",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "path": "^0.12.7",
    "url": "^0.11.0"
  }
}

Put the javascript module in a src folder and then configured the webpack.config.js file like this

import * as path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  mode: "production",
  entry: './src/main.js',
  output: {
    filename: 'word-detective-min.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: "module"
    }
  },
  experiments: {
    outputModule: true
  }
};

Setting the library:type:"module" field was necessary. Otherwise, an empty file was produced.

I am also using ECMA script syntax. That's why I am using export default.