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

我今天也遇到了同样的问题。我的解决办法是move/copy本地资源到public文件夹。这样做之后，我还将 js/html 文件中相应地引用该资源的路径更新为 //.

不需要修改webpack配置。希望对你有帮助！^_^

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

Webpack dev server - Not allowed to load local resource

javascript

google-chrome

reactjs

webpack

webpack-dev-server