将反应应用程序部署到webpack服务器

问题描述：

我是ReactJS的初学者，只是在使用npm start运行应用程序时遇到错误并试图使用Webpack和Babel对其进行配置。将反应应用程序部署到webpack服务器

以下是一些文件： -

的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.jsx

import React from 'react'; 

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

export default App;

文件： - 的src /应用/ 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启动，它提供了以下错误： -

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

答

你似乎忘了，当你需要的NPM模块报价：

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

谢谢，但它说包是现在没有定义。我假设bundle.js是一个文件，它将包含我在dist目录中的所有捆绑输出。 – user4946127

bundle.js也是如此。用引号包起来，像这样：“bundle.js” –

答

变化的错字

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

到

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

将反应应用程序部署到webpack服务器

相关推荐