Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API.установка через "npm install webpack"

Question

Я учусь на React-JS.Я написал простой проект.Но появляется ошибка при запуске команды «npm start».

Мой файл Webpack.config.js приведен ниже -

---

var webpack= require("webpack");
var path =require("path");

var DIST_DIR= path.resolve(__dirname, 
"dist");
 var SRC_DIR= path.resolve(__dirname, 
 "src");

 var config={
 entry: SRC_DIR + "/app/index.js",
 output:{
    path: DIST_DIR + "/app",
    file: "bundle.js",
    publicPath: "/app/"
},
module:{
    loaders: [
        {
            test: /\.js?/,
            include: SRC_DIR,
            loader: "babel-loader",
            query:{
                presets: ["react", 
"es2015", "stage-2"]
            }
        }
    ]
  }
};

module.exports=config;

---

package.json file-

---

{
  "name": "basic-reactjs",
  "version": "1.0.0",
  "description": "Some Basic ReactJS",
  "main": "index.js",
  "scripts": {
  "start": "npm run build",
  "build": "webpack -d && cp 
        src/index.html dist/index.html 
       && webpack-dev-server --content- 
       base src/ --inline --hot",
  "build:prod": "webpack -p && cp 
     src/index.html dist/index.html"
       },
  "keywords": [
   "reactjs"
  ],
  "author": "Numery Zaber",
  "license": "MIT",
  "dependencies": {
  "react": "^16.6.3",
  "react-dom": "^16.6.3"
  },
  "devDependencies": {
  "babel-loader": "^8.0.4",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-2": "^6.24.1",
  "webpack": "^4.26.0",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10"
}

---

Установка веб-пакета следующей командой

npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-реагироватьbabel-preset-stage-2 --save-dev

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Схема в Webpack 4 теперь изменена. Вы импортировали загрузчики, которые работали в более старой версии Webpack.

Для более подробной информации: https://webpack.js.org/concepts/loaders/

var webpack= require("webpack");
var path =require("path");

var DIST_DIR= path.resolve(__dirname, 
"dist");
 var SRC_DIR= path.resolve(__dirname, 
 "src");

 var config={
 entry: SRC_DIR + "/app/index.js",
 output:{
    path: DIST_DIR + "/app",
    filename: "bundle.js",
    publicPath: "/app/"
},
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["react","es2015", "stage-2"], 
        },
      }
    }
  ]
}
};

module.exports=config;

Вы можететакже используйте @ babel / preset-env.