使用React的Webpack：有什么我想念的嗎？

Question

這個問題有點長，但我需要解釋一下背景，請耐心等待。

我正在研究以下列方式構建的Reacj / Ruby應用程序：

<my_app>
 |
 |_____be/
 |     
 |_____fe/
 |     |
 |     |_____node_module/
 |     |_____public/
 |     |     |_____index.html    
 |     |     |_____index.jsx
 |     |     |_____index.test.js
 |     |     |_____bundle.js
 |     |_____src/
 |           |_____app/
 |           |     |_____app.jsx
 |           |     |_____app.test.js
 |           |     |_____app.css
 |           |_____contents/
 |           |     |_____contents.jsx
 |           |     |_____contents.test.js
 |           |     |_____contents.css
 |           |_____footer/
 |           |     |_____footer.jsx
 |           |     |_____footer.test.js
 |           |     |_____footer.css
 |           |_____header/
 |           |     |_____header.jsx
 |           |     |_____header.teste.js
 |           |     |_____header.css
 |           |_____package.json
 |           |_____index.jsx
 |           |_____index.test.js
 |           |_____index.css
 |_____config.ru
 |_____Gemfile
 |_____Gemfile.lock
 |_____integrations.json
 |_____package.json
 |_____webpack.config.js

它是純Ruby（沒有Rails，沒有Sinatra）和ReactJS的混合，其中app ， 內容 ， 頁腳和閱讀器是ReactJS組件。 這個想法是完全分離的后端是從前端FE，通過的WebPack和機架策划，我要去的地方用fetch來抓住從塔伊后端動態數據。

該應用程序與Webpack捆綁在一起后，將由Rack運行。 Rack::Static中間件將處理由npm run build的靜態資產，我創建的Ruby gem會將de frontend的調用重定向到一組PORO（Plain Old Ruby Objects），這將提供de動態數據。 你可能會看到它是一個小框架。 我試圖證明的一個概念。

說到fe ，里面一切都很好。 當我進入它的直接並且進行npm test所有測試運行正常，當我運行npm start它運行正常。

為了簡化測試，所有ReactJS組件都只寫一個單詞。 像這樣：

app.jsx

import React from 'react';
import './app.css';
import Header from '../header/header.jsx';
import Contents from '../contents/contents.jsx';
import Footer from '../footer/footer.jsx';

export default class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Contents />
        <Footer />
      </div>
    );
  }
}

和這個：

header.jsx

import React from 'react';
import './header.css';

export default class Header extends React.Component {
  render() {
    return (
      <p>Header</p>
    );
  }
}

這樣，當我在fe中運行npm start ，我在瀏覽器中看到的所有內容（在http：// localhost：3000 ）都是

Header
Contents
Footer

好吧，到目前為止一切都很好。 但我需要將前端應用程序與Webpack捆綁在一起。 這是我的配置：

webpack.config.js

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'fe/src/') + '/index.js',
    output: {
        path: path.resolve(__dirname,'fe/public/'), 
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: './public',
        port: 3333
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
}

正如您所看到的，我正在fe/public創建bundle.js 。 我的Rack::Static被配置為服務於fe/public的index.html所有靜態請求，而我的gem處理動態請求。

碰巧的是，盡管所有模塊都已正確安裝並且所有模塊都已正確捆綁，但是當我使用rackup運行應用程序時，我什么都看不到。 沒有錯誤，沒有問題......沒有言語！ 只是一個空白的瀏覽器屏幕

我到底錯過了什么？

編輯：

的package.json

{
  "name": "emerald_application",
  "title": "Emerald Framework Application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "fb": "^1.1.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "0.9.5",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "start": "npm run serve | npm run dev",
    "dev": "webpack-dev-server --progress --colors --port 8090"
  }
}

不，我沒有使用create-react-app 。 但這不是問題，因為fe部分運行正常，即ReactJS部件本身運行良好，我對ReactJS應用程序的了解甚至沒有create-react-app創建它們，特別是那么小。

Answer 1

我通過對代碼進行一些更改來解決問題。

首先，我編輯了webpack.config.js 。

webpack.config.js

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'fe/src/') + '/index.jsx',
    output: {
        path: path.resolve(__dirname, 'public'), // <<== THIS
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: './app',
        port: 3333
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: [ "node_modules" ],
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
}

正如您所看到的，這將使Webpack將bundle.js文件放在我的應用程序根目錄的public目錄中。 之后，我在同一個public目錄中創建了一個index.html文件。 指向fe/src的index.html會給圖像和其他資源的路徑帶來很多麻煩，現在這些路徑將放在public/resources中，在創建的頁面上更容易引用它們。 我的index.html文件現在顯示為：

的index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

執行此操作后，該應用程序仍未運行。 Webpack找不到安裝的節點模塊。 他們在fe dir里面，然后我剛創建了一個符號鏈接

$ ln -sf fe/node_modules

然后webpack運行得很好並創建了捆綁包。

這是我的主要目標，將前端完全隔離在fe目錄中，並且能夠同時從此dir外部運行此應用程序，在那里我可以使用單個命令在單個命令下運行完整的應用程序（后端和前端）處理。 這將使Heroku和其他類似服務的部署更容易。

我感謝所有花時間幫助我的人。 這是讓我的Web開發框架運行的最后一步。 現在只是改善它的問題。