Question

我正在尝试从开发环境中的webpack切换为webpack-dev-server。

在正确创建捆绑包并将其放在http://localhost:8080/path/to/bundle的内存中的意义上，一切正常。但是我无法访问此路径，因为浏览器会阻止混合内容，并且无法通过https访问该文件。

这是我的第一个问题，但请允许我解决该问题，我不能只说一句就包括文件

<script src='http://localhost:8080/path/to/bundle'>，因为当我将其推送到生产环境时将无法正常工作。

我已经看过并阅读了许多不同的教程，但是我似乎并不太了解它是如何工作的。供参考，这是我的配置文件：

module.exports = {
    entry: "./npm_views/entry.js",
    output: {
        filename: "npm_bundle.js",
        publicPath: '/build',
        path: path.resolve(__dirname, "build/"),
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: /npm_views/,
                loader: "babel-loader",
                query: {
                    presets: ['react' ,'env'],
                    plugins: ['transform-class-properties']
                }
            }
        ]
    },
}

Answer 1

我找到了解决问题的方法，并且我想为其他任何从webpack切换到webpack-dev-server的人留下指南：

首先，您要向webpack.config.js文件添加公用路径：

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    ...
}

webpack-dev-server启动运行在端口8080上的服务器，并加载文件并从您指定的publicPath +文件名访问该文件。因此，如果要包含它，您将必须添加一个像这样的脚本标签：

<script src='http://localhost:8080/build/bundle.js'>

或更笼统

<script src='http://localhost:8080/publicPath/filename'>

现在，第一个问题是在生产环境中您将不会使用webpack-dev-server。您将使用webpack在指定路径中创建构建文件。因此，您将必须在包含捆绑软件的html中执行以下操作：

<?php

$BundlePath = IsThisMyLocalMachine ? 'http://localhost:8080/publicPath/filename' : 'build\bundle.js'

?>

<html>
...
<script src='<?php echo $BundlePath ?>'>
..
</html>

现在，最后一个问题是，如果您的网站使用https并且webpack-dev-server在http上提供构建，浏览器会将其作为混合内容阻止。

解决这个问题非常简单。 您只需要将webpack-dev-server上的内容添加到您的配置文件中，即可告诉https：

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    devServer: {
        https: true,
    },
    ...
}

现在，如果将所有http://localhost:8080/更改为https://localhost:8080/，一切都会正常运行

Webpack-dev-server如何包含捆绑

1 个答案: