Webpack已使用与API模式不匹配的配置对象初始化。webpack安装由"npm安装webpack"

Question

我在网上学习。我写了一个简单的项目。但运行“npm start”命令时出错。

我的网页。配置。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;

包裹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"
}

通过follwoing命令安装Webpack

NPM安装webpack webpack dev-server Babel-loader Babel-preset-es2015 Babel-preset-report-Babel-preset-ending-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。