使用 HTTP 而不是 HTTPS 加载 Webpack 块答案

【问题标题】：Webpack chunk loading using HTTP instead of HTTPS使用 HTTP 而不是 HTTPS 加载 Webpack 块
【发布时间】：2021-12-31 10:09:11
【问题描述】：

我刚刚将我的一个 React 组件转换为使用延迟加载，虽然它构建正常，但我收到一个 scrip-src CSP 错误，因为该块试图通过 HTTP 而不是站点运行的 HTTPS 加载. （如果我关闭 CSP，我会收到混合内容错误，因此不是 CSP 本身导致问题）

内容安全策略：该页面的设置阻止了在 http://passport.local//app/assets/bundle/1.bundle.js（“script-src”）处加载资源。引导程序：128

我正在使用 Webpack 4.46.0

我是否缺少强制它使用与主应用程序相同的协议的设置？

非常感谢。尼尔

我的 webpack 配置如下


const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv ) =>
{
    const IS_DEVELOPMENT = argv.mode === "development";
    const IS_PRODUCTION = argv.mode === "production";

    let plugins = [

        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: path.join('..', 'css', 'app.css'),
            //chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),

        new webpack.DefinePlugin({
            '__DEV__': JSON.stringify(true),
            '__API_HOST__': JSON.stringify('https://passport.local/'),
        }),
    ] ;

    return {
        devtool: 'source-map',
        optimization: {
            minimize: IS_PRODUCTION
        },
        entry: {
            main: [
                './_devapp/app.js',
                './_devapp/css/app.scss'
            ],
            login: [
                './_devapp/login.js',
            ]
        },
        output: {
            path: path.resolve(__dirname, 'assets', 'bundle'),
            filename: '[name].bundle.js'
        },
        resolve: {
            extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
            alias: {
                ui: path.resolve(__dirname, '_devapp/ui/'),
                root: path.resolve(__dirname, '_devapp/')
            }
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx|tsx|ts)$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react',
                                '@babel/preset-typescript'
                            ],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", {"legacy": true}],
                                '@babel/plugin-syntax-dynamic-import',
                                ['@babel/plugin-proposal-class-properties', {"loose": true}],
                                ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
                                ["@babel/plugin-proposal-private-methods", {"loose": true}]
                            ]
                        }
                    },
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it uses publicPath in webpackOptions.output
                                publicPath: '../',
                            },
                        },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader'
                    ],
                },
                {
                    test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../css/[hash].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader']
                }
            ]
        },
        externals: {
            myApp: 'myApp',
        },
        plugins: plugins,
    };
}

【问题讨论】：

标签： reactjs webpack lazy-loading webpack-4

【解决方案1】：

我设法解决了这个问题。这是由隐藏在我的代码中的 webpack_public_path 定义引起的。我在多年前使用的 react 站点模板中继承了这一行，但从不知道它做了什么......直到现在：

__webpack_public_path__ = `${window.STATIC_URL}/app/assets/bundle/`;

${window.STATIC_URL} 是（至少在我的平台上）一个 http:// 常量，并覆盖了运行主站点的 https://。

注释掉这一行解决了问题:-)

【讨论】：