Question

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

运行命令时webpack-dev-server --config webpack/webpack.dev.js，然后转到localhost，我收到了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,
    }

}

希望有人可以提供帮助。 TNX！

Answer 1

我今天遇到了同样的问题，我想我知道哪里出了问题。是publicPath。当具有此值时，应该相应地更新html文件中的script标记，但是似乎很难更改HtmlWebpackPlugin自动生成的内容。

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

Answer 2

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

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

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

2 个答案: