node.js - Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 webpack 安装通过 "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 文件 --

<小时/>

{
  "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"
}

<小时/>

通过以下命令安装Webpack

npm 安装 webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react 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。