Question

我是ReactJS的初学者，当我使用npm start运行应用程序时遇到错误时，我正在探索它并尝试使用Webpack和Babel进行配置。

以下是一些文件： -

的package.json

{
 "name": "reactstarter",
 "version": "1.0.0",
 "description": "A basic React application to explore its state and beauty",
 "main": "index.js",
 "scripts": {
    "start": "webpack-dev-server"
   },
 "keywords": [
   "reactjs"
  ],
"author": "user1705",
"license": "MIT",

"dependencies": {
 "debug-log": "^1.0.1",
 "react": "^15.3.2",
 "react-dom": "^15.3.2"
},
"devDependencies": {
 "webpack": "^1.13.2"
 }
}

根文件夹中有两个目录 src 目录和 dist 目录。

文件： src / index.html

<!DOCTYPE html>
<html lang = "en">

  <head>
   <meta charset = "UTF-8">
   <title>React App</title>
  </head>

<body>
  <div id = "app"></div>
  <script src = "/app/bundle.js"></script>
</body>

</html>

文件： - src / app / App.jsx

import React from 'react';

class App extends React.Component {
 render() {
   return (
     <div>
        Hello World!!!
     </div>
  );
 }
}

export default App;

文件： - src / app / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

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",
    fileName:bundle.js,
    publicPath:"/app/",
   },
  devServer: {
  inline: true,
  port: 7777
   },

  modules:{
    loaders:[
        {
            test:/\.js?/,
            include:SRC_DIR,
            loader:"babel-loader",
            query:{
                presets:["react","es2015","stage-2"]
            }
        }
       ]
     }
 };

 module.exports=config;

所以现在每当我运行命令 npm start 时，它都会出现以下错误： -

作为初学者，我不知道这是什么问题？如果有人遇到过这个类似问题或者知道错误，请提供您的知识并告诉我正确的道路。

Answer 1

更改

output:{
    path:DIST_DIR+"/app",
    fileName:bundle.js,
    publicPath:"/app/",
   },

到

output:{
    path:DIST_DIR+"/app",
    fileName:"bundle.js",
    publicPath:"/app/",
   },

Answer 2

当您需要npm模块时，似乎忘记了引号：

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

使用webpack服务器部署react app

2 个答案: