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

Question

I'm using webpack-dev-server in order to develop a React app on windows.

When running the command: webpack-dev-server --config webpack/webpack.dev.js , then going to localhost, I'm getting an error message for the js file (the bundled one):

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

I'm not fully familiar with webpack-dev-server, but didn't get a sense about why this can happen even from the docs and the GH issues.

my config looks like:

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,
    }

}

Hope someone can help. Tnx!

Answer 1

I got the same problem today, and I think I know where is the problem. It's the publicPath . When we have this value, the script tag in html file should be updated accordingly, but it seems like it's not easy to change something auto-generated by HtmlWebpackPlugin.

So easy fix is delete the publicPath value. Works for me.

Answer 2

I also got the same problem today. My solution is to move/copy the local resource to the public folder. After doing so, I also updated the path that references that resource accordingly in the js/html file to //<resource_name>.

It does not require to modify the webpack config. Hope it helps!^_^