webpack - Electron-webpack：css 和 html 加载器无法正常工作

Question

我有一个电子应用程序。我想将它与 webpack 捆绑，但我似乎无法解析 css 和 html 文件。我添加了html-loaderandcss-loader这是我的配置文件：

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（使用link标签）。

关于可能是什么问题的任何想法？

Answer 1

我发现了这个问题。似乎如果我使用该rules属性而不是loaders它可以工作。所以我的 webpack 配置看起来像这样：

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