正确链接到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软件包

回答

相关问题