2

我目前正在尝试更好地了解 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，因为服务器上的 dev-server 不会提供捆绑包。

我读了很多webpack-dev-server/client?https://localhost:8877， webpack/hot/only-dev-server如果我理解正确，这些条目将重定向到 webpack-dev-server url？

如果我运行我的npm start-script webpack-dev-server --config webpack.dev.js，这将不会在文件系统中构建我的 elements.bundle.js，而只会从开发服务器的内存中提供它。在这种情况下，我不能包含本地 bundle.js，但必须使用来自localhost:8877. 但是我怎样才能让 webpack 编译入口点和 webpack-dev-server 用一个命令同时完成它的工作呢？

如果我在两个终端中运行，那么我可以包含webpack --config webpack.dev.js在我的 php 文件中，但是 HMR 不再工作了，因为它告诉我它必须重新加载整个页面。webpack-dev-server --config webpack.dev.js/dist/elements.bundle.js

我真的很想理解这些概念，如果有人能给我一些建议并帮助我正确设置我的项目，我会很高兴。

如何在不更改我的 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"
        }
    }
};
4

1 回答 1

0

实际上这不是你的问题，webpack而是 webpack-dev-server你的php。

我有同样的问题，类似的设置。我最终得到了 php 变量，它将包含/dist/bundle.js在production和developmenthttp://localhost:3000/bundle.js中。

条件是该站点是否从生产域提供服务。

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

然后使用该变量，您可以将 js 文件的位置连接到主模板 php 文件中。

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

希望有帮助

于 2017-09-17T04:57:00.387 回答