Question

我有一个电子应用程序。我想用webpack捆绑它，但我似乎无法解析css和html文件。我添加了html-loader和css-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"]
            }
        ]
    }
}

Electron-webpack：css和html加载器不起作用

1 个答案: