正确链接到PHP网站中的webpack-dev-server捆绑包

Question

我目前正在尝试更好地了解webpack和webpack-dev-server。

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

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

问题在于，对于生产环境，我必须手动将此URL更改为/dist/elements.bundle.js类的/dist/elements.bundle.js ，因为该捆绑包将不会由服务器上的dev-server提供。

我读了很多关于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，而只会从开发服务器的内存中提供它。 在这种情况下，我不能包含本地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"
        }
    }
};

Answer 1

实际上，这不是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>

希望能有所帮助

正确链接到PHP网站中的webpack-dev-server捆绑包

问题描述

1 个解决方案

解决方案1
0 2017-09-17 04:57:00

正确链接到PHP网站中的webpack-dev-server捆绑包

问题描述

1 个解决方案

解决方案1 0 2017-09-17 04:57:00

解决方案1
0 2017-09-17 04:57:00