Question

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

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

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

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

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

如果我用npm start运行webpack-dev-server --config webpack.dev.js - 脚本，这将不会在文件系统中构建我的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"
        }
    }
};

Answer 1

实际上这不是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站点中的webpack-dev-server bundle

1 个答案: