正確鏈接到php站點中的webpack-dev-server軟件包

我目前正試圖更好地理解webpack和webpack-dev-server。正確鏈接到php站點中的webpack-dev-server軟件包

我有以下設置：一個php站點提供一個反應應用程序，我希望在本站點上進行熱模塊替換（HMR）以用於開發目的。因爲我不希望我的WebPack-dev的服務器來爲我的整個頁面，我試圖把它爲我的bundle.js，然後我包括我的PHP文件此刻手動：

<script src="https://localhost:8877/dist/elements.bundle.js"></script>

問題是，對於生產，我必須手動更改此URL到類似/dist/elements.bundle.js的東西，因爲該服務器上的開發服務器不會提供該服務包。

我讀了很多關於webpack-dev-server/client?https://localhost:8877和 webpack/hot/only-dev-server，如果我正確地理解它，那些條目將重定向到webpack-dev-server url？

如果我使用webpack-dev-server --config webpack.dev.js運行我的npm start-script，這將不會在文件系統中構建我的elements.bundle.js，而是僅從dev-server的內存中提供它。在這種情況下，我不能包含本地bundle.js，但必須使用localhost:8877中的那個。但是我怎樣才能讓webpack編譯入口點，並且webpack-dev-server在一個命令的同時執行它的工作？

如果我在兩個終端運行webpack --config webpack.dev.js和webpack-dev-server --config webpack.dev.js，然後我可以加入我的PHP文件/dist/elements.bundle.js，但HMR不工作了，因爲它告訴我，它必須重新加載整個頁面。

我真的很想理解這些概念，如果有人能給我一些建議並幫助我正確設置項目，我會很高興。

如何在開發和生產之間進行切換而不改變我的php文件中的腳本標籤，並且支持HMR和react-hot-loader？

這是我webpack.dev.js：

const merge = require('webpack-merge'); 
const common = require('./webpack.common.js'); 
const development = process.env.NODE_ENV !== "production"; 

module.exports = merge(common, { 
    devtool: 'inline-source-map', 
    watch: development 
});

這是我webpack.common.js：

const path = require('path'); 
const webpack = require('webpack'); 
require("babel-polyfill"); 

const development = process.env.NODE_ENV !== "production"; 

module.exports = { 
    context: path.resolve(__dirname, "webroot"), 
    devtool: 'cheap-eval-source-map', 
    entry: { 
     elements: [ 
      'babel-polyfill', 
      'react-hot-loader/patch', 
      'webpack-dev-server/client?https://localhost:8877', 
      'webpack/hot/only-dev-server', 
      './js/elements.client.js' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, "webroot", "js", "dist"), 
     filename: "[name].bundle.js", 
     publicPath: "https://localhost:8877/dist/" 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      DEVELOPMENT: JSON.stringify(development) 
     }), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NamedModulesPlugin() 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'], 
        plugins: ['react-hot-loader/babel','react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
       } 
      } 
     ] 
    }, 
    devServer: { 
     hot: true, 
     https: true, 
     inline: true, 
     host: 'localhost', 
     port: 8877, 
     contentBase: path.resolve(__dirname, "webroot"), 
     headers: { 
      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", 
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" 
     } 
    } 
};

來源

2017-09-16 F. Eichhorst

我不明白。你爲什麼要這個？重新加載是爲了開發，所以不需要php服務器解決方法（start命令allready爲你創建一個nodejs http服務器）。 – Rienk

因爲目前我有一個php框架在使用，可以做路由並提供一些JS變量。我不能簡單地從節點服務器 –

其實這不是webpack或webpack-dev-server但你的問題PHP。

我有同樣的問題，和類似的設置。我結束了與PHP變量將包含/dist/bundle.js上生產和http://localhost:3000/bundle.js上發展。

條件是如果網站是從生產域服務或不。

$path_to_js = $_SERVER["HTTP_HOST"] === 'localhost' ? 'http://localhost:3000/bundle.js' : 'dist/bundle.js';

然後用這個變量你可以在你的主模板php文件中連接你的js文件的位置。

<html> 
    <head> ... </head> 
    <body> 
     <script src="<?=$path_to_js?>"></script> 
    </body> 
</html>

希望幫助

來源

2017-09-17 04:57:00 felixmosh

服務啊，謝謝。我不喜歡這個解決方案，因爲它取決於本地域，而我使用page.dev時，另一個開發人員使用page.local。我有點失望，沒有純粹的JS解決方案。也許我可以在我的php文件中創建一個腳本博客，根據所使用的環境更改腳本標記的URL ... –

因此，我認爲我發現的最佳解決方案是讓webpack創建一個JSON文件，聲明是否生產或開發，我可以用php解析。也許這是行得通的。 –

正確鏈接到php站點中的webpack-dev-server軟件包

回答

相關問題