電子ウェブパック：cssとhtmlローダーは動作していません

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

私はこの問題を発見しました。 loadersの代わりにrulesプロパティを使用すると機能するようです。だから私の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"] 
      } 
     ] 
    } 
}