Webpack troubleshooting

‘webpack’ is not recognized as an internal or external command

This is probably you have installed webpack locally and run webpack to build in another project where you you did not install it again for that project.

There are mainly two methods to install webpack:

  • Local installation

    It is the installation method suggested by the webpack official guide.

  • Global installation (with option --global)

To fix this error, you can install webpack locally again in the folder where you meet this error.

Or you can install webpack globally if this is the way you prefer. In this way, all the project can share the same version of webpack and this maybe not flexible enough sometimes.

You can also specify the path of webpack in the package.json to temporarily fix it. Below is an example, remember to replace with your own path.

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "D:\projects\webpack-test\node_modules\.bin\webpack"
  }

Error: Cannot find module ‘terser-webpack-plugin’

According to Webpack TerserWebpackPlugin:

Webpack v5 comes with the latest terser-webpack-plugin out of the box.

But you may still meet below error even you have webpack v5 or above.

Below is an example in which webpack is installed globally.

[webpack-cli] Failed to load 'D:projectsdemowebpack.config.js' config
[webpack-cli] { Error: Cannot find module 'terser-webpack-plugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (C:UsersJohnAppDataRoamingnpmnode_moduleswebpack-
clinode_modulesv8-compile-cachev8-compile-cache.js:159:20)
    at Object.<anonymous> D:projectsdemo\webpack.config.js:2:22)
    at Module._compile (C:UsersJohnAppDataRoamingnpmnode_modules
webpack-clinode_modulesv8-compile-cachev8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3) code: 'MODUL
E_NOT_FOUND' }

If this is the case you are meeting, install webpack again locally in the project folder where you are working with.

Or you can just add the path to terser-webpack-plugin in the webpack.config.js like below.:

const path = require('path');
const TerserPlugin = require('terser-webpack-C:\Users\John\AppData\Roaming\npm\node_modules\webpack\node_modules\terser-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true,
            }),
        ],
    },
};

Conclusion

You may save time if you install webpack locally as suggested by the webpack official guide.