Javascript 正确链接到php站点中的webpack dev服务器包_Javascript_Webpack_Webpack Dev Server_React Hot Loader_Hot Module Replacement

Javascript 正确链接到php站点中的webpack dev服务器包

javascript webpack

Javascript 正确链接到php站点中的webpack dev服务器包,javascript,webpack,webpack-dev-server,react-hot-loader,hot-module-replacement,Javascript,Webpack,Webpack Dev Server,React Hot Loader,Hot Module Replacement,我目前正试图更好地了解webpack和webpack开发服务器我有以下设置：一个php站点提供一个react应用程序，我希望在这个站点上使用热模块替换（HMR）进行开发。因为我不想让我的webpack dev服务器为我的整个页面服务，所以我尝试让它为我的bundle.js服务，然后我现在手动将其包含在我的php文件中： <script src="https://localhost:8877/dist/elements.bundle.js"></script> 这是我

我目前正试图更好地了解webpack和webpack开发服务器

我有以下设置：一个php站点提供一个react应用程序，我希望在这个站点上使用热模块替换（HMR）进行开发。因为我不想让我的webpack dev服务器为我的整个页面服务，所以我尝试让它为我的bundle.js服务，然后我现在手动将其包含在我的php文件中：

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

这是我的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"
        }
    }
};

实际上，这不是

webpack

或

webpack dev server

的问题，而是您的问题

我有同样的问题，和类似的设置。最后，我得到了一个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>


... 
实际上，这不是webpack
或webpack dev server
的问题，而是您的问题
我有同样的问题，和类似的设置。最后，我得到了一个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>


... 
我不明白。你为什么想要这个？重新加载是为了开发，因此不需要php服务器解决方案（start命令allready为您创建一个nodejs http服务器）。因为目前我正在使用一个php框架来执行路由并提供一些JS变量。我不能简单地从我不理解的节点服务器服务。你为什么想要这个？重新加载是为了开发，因此不需要php服务器解决方案（start命令allready为您创建一个nodejs http服务器）。因为目前我正在使用一个php框架来执行路由并提供一些JS变量。我不能简单地从节点服务器服务啊，谢谢你。我不喜欢这个解决方案，因为它依赖于本地域，当我使用page.dev时，另一个开发人员使用page.local。我有点失望，没有纯JS解决方案。也许我可以在我的php文件中创建一个脚本博客，根据使用的环境更改脚本标记的url……所以我认为我找到的最佳解决方案是让webpack创建一个JSON文件，声明在生产或开发时是否可以使用，我可以用php解析。也许这会奏效。啊，谢谢。我不喜欢这个解决方案，因为它依赖于本地域，当我使用page.dev时，另一个开发人员使用page.local。我有点失望，没有纯JS解决方案。也许我可以在我的php文件中创建一个脚本博客，根据使用的环境更改脚本标记的url……所以我认为我找到的最佳解决方案是让webpack创建一个JSON文件，声明在生产或开发时是否可以使用，我可以用php解析。也许这会奏效。