將反應應用程序部署到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啓動，它提供了以下錯誤： -

作爲一個初學者，我不知道那是什麼問題？如果有人遇到類似的問題或者知道這個錯誤，請提供你的知識，並告訴我正確的道路。

來源

2016-10-02 user4946127

你似乎忘了，當你需要的NPM模塊報價：

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

來源

2016-10-02 13:17:19

謝謝，但它說包是現在沒有定義。我假設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/", 
    },

來源

2016-10-02 15:20:17

將反應應用程序部署到webpack服務器

回答

相關問題