javascript - Webpack - npm run start and build doesn't work? - Stack Overflow

admin管理员组

文章数量:1405114

I am used to create react projects using create-react-app but i decided to create one without it but i am stuck in webpack configuration as i am new to it:

This is my package.json file:

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "server": "^1.0.30",
    "style-loader": "^2.0.0",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js file:

const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const rules = [
    {
        test: /\.js$/,
        exclude: /node-modules/,
        use: {
            loader: 'babel-loader'
        }
    },
    {
        test: /\.css$/,
        exclude: /node-modules/,
        use: ['style-loader', 'css-loader']
    }
]

module.exports = {
    entry: path.join(__dirname, 'src', index.js),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '/build')
    },
    module: {rules},
    plugins: [
        new HtmlWebpackPlugin({template: './public/index.html'})
    ]
}

.babelrc.json file:

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

this is my whole project folders and files tree:

When i run npm run start or npm run build, it fails:

with npm run start, i get this error:

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',

With npm run build:

[webpack-cli] ReferenceError: index is not defined

I am new to webpack and i can't figure out where the problem is, i think i have installed all files and configurations required to make it work, so where is the problem exactly??

I am used to create react projects using create-react-app but i decided to create one without it but i am stuck in webpack configuration as i am new to it:

This is my package.json file:

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "server": "^1.0.30",
    "style-loader": "^2.0.0",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js file:

const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const rules = [
    {
        test: /\.js$/,
        exclude: /node-modules/,
        use: {
            loader: 'babel-loader'
        }
    },
    {
        test: /\.css$/,
        exclude: /node-modules/,
        use: ['style-loader', 'css-loader']
    }
]

module.exports = {
    entry: path.join(__dirname, 'src', index.js),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '/build')
    },
    module: {rules},
    plugins: [
        new HtmlWebpackPlugin({template: './public/index.html'})
    ]
}

.babelrc.json file:

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

this is my whole project folders and files tree:

When i run npm run start or npm run build, it fails:

with npm run start, i get this error:

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',

With npm run build:

[webpack-cli] ReferenceError: index is not defined

I am new to webpack and i can't figure out where the problem is, i think i have installed all files and configurations required to make it work, so where is the problem exactly??

• javascript
• reactjs
• npm
• webpack

Share Improve this question Follow edited Oct 26, 2020 at 21:08 Code Eagle asked Oct 26, 2020 at 20:57 Code EagleCode Eagle 1,26233 gold badges2323 silver badges4242 bronze badges 4

• 1 Did you run npm install? – Josh Bonnick Commented Oct 26, 2020 at 20:59
• @JoshBonnick yes! – Code Eagle Commented Oct 26, 2020 at 21:00
• 1 also, ensure you are in the project folder when issuing that mand from the terminal. You might consider using the nom plug in where you can just click on the script to run. – Randy Casburn Commented Oct 26, 2020 at 21:00
• @RandyCasburn i am in the right directory – Code Eagle Commented Oct 26, 2020 at 21:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I think the problem is, you wrote index without string quotes.

entry: path.join(__dirname, 'src', index.js)

This should be

entry: path.join(__dirname, 'src', 'index.js')

It is like a variable when you write without string quotes. You can try the same this on console.log.

Because index is not defined.

There is an open bug report stating webpack-server 3.11 is not patible with with webpack-cli v4.

The report can be found here: Issue 2759

Yes - webpack-dev-server does not work with webpack-cli v4

Link to ment: https://github./webpack/webpack-dev-server/issues/2759#issuement-706668920

The solution is to revamp your project.json file by changing to patible versions (and wele to Webpack :-) )

"main": "index.js" in package.json should be "main" : "src/index.js"

本文标签： javascriptWebpacknpm run start and build doesn39t workStack Overflow