NPM package.json

{
    "name": "webpack-sandbox-ts",
    "version": "1.0.0",
    "description": "Just roughly following the \"Getting Started\" section here: https://webpack.js.org/guides/getting-started/",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve --open",
        "watch": "webpack --watch",
        "build": "webpack --config webpack.config.prod.js"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/monello/webpack-sandbox.git"
    },
    "keywords": [],
    "author": "Morne Louw",
    "license": "ISC",
    "bugs": {
        "url": "https://github.com/monello/webpack-sandbox/issues"
    },
    "homepage": "https://github.com/monello/webpack-sandbox#readme",
    "devDependencies": {
        "html-webpack-plugin": "^5.5.0",
        "ts-loader": "^9.2.8",
        "typescript": "^4.6.2",
        "webpack": "^5.70.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.7.4"
    }
}

private

private: true,

From: https://docs.npmjs.com/cli/v8/configuring-npm/package-json#private

If you set "private": true in your package.json, then npm will refuse to publish it.

This is a way to prevent accidental publication of private repositories. If you would like to ensure that a given package is only ever published to a specific registry (for example, an internal registry), then use the publishConfig dictionary described below to override the registry config param at publish-time.

scripts

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve --open",
        "watch": "webpack --watch",
        "build": "webpack --config webpack.config.prod.js"
    },

Here you set up some NPM scripts that you will be able to run from the Terminal when on the root-dir of your project

start

The way it is set up means this "Run webpack (as is configured in the webpack.config.js and automatically open the default browser and serve the app"

In this demo, repo webpack is configured to clean out the dist folder, rebuild the bundled file to serve and live reload the browser. All this happens automatically as soon as you edit & save a source file.

You can run this script in 2 ways:

1. npm run start
2. npm start

I think the "start" script is the only one from which you can leave the "run" bit out.

watch

If you are running the index.html file directly in the browser, or perhaps you are running your app through the VSC "Go Live" plugin, then you can still make webpack automatically rebuild the files being served when you edit and save them, but running this script in the Terminal.

npm run watch

build

This is the script you will use to build the files in the dist folder that you would serve in a production environment. You will need a production-specific webpack config file called webpack.config.prod.ts.

You can see from the way this build-scrip is set up that the way you tell webpack which config to use is to pass in the --config parameter followed by the name of the config file.

The only reason the start script in this example doesn't have the --config parameter is that it uses the webpack.config.js (development config) by default if you don't send in a config parameter.

devDependencies

You don't have to add these manually to the package.json file as these are added for you when you run the npm install --save-dev <package-name> script from the terminal to install the various packages.

The trick is in the --save-dev part. This tells NPM you are installing a package that your project will depend on (project dependencies), but it's only applicable for your development environment.