Webpack 电子网页包：css和html加载程序不是'；工作

我有一个电子应用程序。我想把它和webpack捆绑在一起，但我似乎无法解析css和html文件。 我添加了

html加载程序

和

css加载程序

，这是我的配置文件：

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"]
            }
        ]
    }
};

我一直收到这样的信息：

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

对于HTML文件，我会遇到相同的错误：

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

我调用HTML文件的地方如下：

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

最奇怪的是-我调用

css

文件的唯一位置是

html

文件中（使用

链接

标记）

---

你知道问题出在哪里吗？

我发现了问题所在。似乎如果我使用

规则

属性而不是

加载程序

，它就会工作。因此，我的网页包配置如下所示：

{
 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"]
            }
        ]
    }
}