Need help with Installing and running a webpack for react/babel

1

Hi All,

I was going through the webpack installation and running instruction below and I am getting the error below when I try to run it to create the output html file. What am I doing wrong?

The instruction I am using is:

And the error I am getting in the cmd window is:

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 59844471af22b8841075
Version: webpack 4.43.0
Time: 148ms
Built at: 04/30/2020 12:19:13 PM
       Asset       Size  Chunks             Chunk Names
./index.html  304 bytes          [emitted]

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\Dag\Documents\webdev\javascript\React\simple-webpack'
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 603 bytes {HtmlWebpackPlugin_0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! simple-webpack@1.0.0 start: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the simple-webpack@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dag\AppData\Roaming\npm-cache\_logs\2020-04-30T17_19_13_348Z-debug.log
2

Shouldn’t the start script be this:

"start": "webpack-dev-server --mode development --open"

Without seeing the configs and dependencies it’s a little hard to know if you missed something. I’d suggest copy and pasting everything when the article shows some command or config to avoid missing something or mistyping, etc.

3

I have the start script defined in the package.json file as seen below.

{
  "name": "simple-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.2.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

My webpack.config.js file looks as below…

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlPlugin]
};

Is there anything I am missing?

4

You are missing the babel dev dependencies. From the article.

npm i babel-core babel-loader babel-preset-env babel-preset-react -D

And again your start script is not the same as in the article.

1 Like
5

I will look at that. Thanks.