首页 文章

使用webpack服务器部署react app

提问于
浏览 次
1

我是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 时，它都会出现以下错误： -
enter image description here

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

javascript reactjs

2 回答

  • 1

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

    var webpack= require('webpack');
var path= require('path');
    回复于
  • 0

    更改

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

    至

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

相关问题