Electron-webpack: css and html loaders arent' working

Question

I have an electron app. I want to bundle it with webpack but I just can't seem to be able to parse the css and html files. I've added the html-loader and css-loader and this is my config file:

module.exports = {
    entry: "./src/app.js",
    module: {
        loaders: [
            {
                test: /\.css/,
                loaders: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loaders: ["url-loader?limit=5000&name=img/img-[hash:6].[ext]"]
            },
            {
                test: /\.html$/,
                loaders: ["html-loader"]
            }
        ]
    }
};

I keep getting this message:

WARNING in ./src/styles.css
    Module parse failed: Unexpected token (2:5)
    You may need an appropriate loader to handle this file type.

I get the same error for HTML files:

WARNING in ./src/page1.html
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.

The place in which I call the HTML file is this:

mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, '/src/page1.html'),
            protocol: 'file:',
            slashes: true
        }));

The strangest thing is - the only place in which I call the css file is inside the html file (using the link tag).

Any idea as to what might be the issue?

score 1 · Answer 1 · answered Oct 26 '17 at 08:45

I've found the issue. It seems that if I use the rules property instead of the loaders it works. So my webpack config looks like this:

{
 entry: "./src/app.js",
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: ["url-loader?limit=5000&name=img/img-[hash:6].[ext]"]
            },
            {
                test: /\.html$/,
                use: ["raw-loader"]
            }
        ]
    }
}

Electron-webpack: css and html loaders arent' working

1 Answers1