Webpack 开发服务器 - 不允许加载本地资源

Question

我正在使用 webpack-dev-server 来在 Windows 上开发 React 应用程序。

运行命令时： webpack-dev-server --config webpack/webpack.dev.js ，然后转到本地主机，我收到 js 文件（捆绑的）的错误消息：

Not allowed to load local resource: file:///C:/Dev/react-starter/dist/main.js

我对 webpack-dev-server 并不完全熟悉，但即使从文档和 GH 问题中也无法理解为什么会发生这种情况。

我的配置看起来像：

var path = require('path');
var WebpackDashboard = require('webpack-dashboard');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var srcFolder   = path.resolve(__dirname, '../src');
var buildFolder = path.resolve(__dirname, '../dist'); 
var publicFolder = path.resolve(__dirname, '../assets');

module.exports = { 
    target: 'web',
    entry: './index.js',
    context: srcFolder,
    devtool: 'source-map',

    output: {
        path: buildFolder,
        publicPath: path.resolve(__dirname, '../dist/'),        
        filename: '[name].js',
        chunkFilename: '[name].chunk.js',

    },

    resolve: {
        extensions: ['.js', '.jsx', '.json', '.scss'],
        alias: {
            '@': srcFolder,
        }
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            inject: 'body',
            template: path.resolve(__dirname, '../src/index.html'),
        }),
    ],

    devServer: {
        contentBase: path.join(__dirname, '../dist'),
        port: 4464,
        hot: true,
        publicPath: buildFolder,
    }

}

希望有人能帮忙。 天啊！

Answer 1

我今天遇到了同样的问题，我想我知道问题出在哪里了。 这是publicPath 。 当我们有这个值时，html文件中的脚本标签应该相应地更新，但似乎很难改变HtmlWebpackPlugin自动生成的东西。

简单的解决方法是删除publicPath值。 为我工作。

Answer 2

我今天也遇到了同样的问题。 我的解决方案是将本地资源移动/复制到公用文件夹。 这样做之后，我还将 js/html 文件中相应地引用该资源的路径更新为 //<resource_name>。

它不需要修改 webpack 配置。 希望能帮到你！^_^