Tag: webpack

‘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,
            }),
        ],
    },
};

Webpack fails with class static properties

When building JavaScript files with static properties, it throws below error:

ERROR in ./src/xxx.js 52:23
Module parse failed: Unexpected token (52:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     class Storage {
|
>     static isAvailable = this.checkAvailable('localStorage');
|
|     static checkAvailable(type) {
 @ ./src/main.js 3:0-75 52:0-22 74:0-15

Static properties is one of ES2015 features, to use these features, we need to use a transpiler such as Babel or Bublé via webpack’s loader system. In other words, we need to use a loader (babel-loader) to transpile the javascript file with ES2015 features that Webpack can not handle.

First install babel-loader：

$ npm install -D babel-loader @babel/core @babel/preset-env

Then config it in webpack.config.js like this:

const path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        resets: ['@babel/preset-env'],
                    },
                },
            },
        ],
    },
}

Conclusion

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