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

通过follwoing命令安装Webpack

npm install 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。

已使用与API模式不匹配的配置对象初始化Webpack。通过“ npm install webpack”安装webpack

1 个答案: