CSSと画像のみのWebpack設定

Question

CSSと画像をバンドルするための特定のWebpack設定でCSSライブラリを構築しています。問題は、私はそれを実行したときにそれらが.cssのエントリー・ポイント・ファイルにインポートされませんので、画像が処理されていないということです

const CssEntryPlugin = require("css-entry-webpack-plugin"); 
    const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

    module.exports = { 
     entry: { 
      "styles": "./assets/css/lib.scss" 
     }, 
     output: { 
      path: __dirname + "/static/", 
      filename: "lib.css" 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.scss$/, 
        use: ExtractTextPlugin.extract({ 
         fallback: 'style-loader', 
         //resolve-url-loader may be chained before sass-loader if necessary 
         use: ['css-loader', 'postcss-loader', 'sass-loader'], 
        }) 
       }, 
       { 
        test: /\.(png|jpg|gif)$/, 
        use: [ 
         { 
          loader: 'file-loader', 
          options: { 
           loader: 'image-webpack-loader', 
           options: { 
            bypassOnDebug: true, 
           }, 
          } 
         } 
        ] 
       } 
      ] 
     }, 
     plugins: [ 
      new ExtractTextPlugin('lib.css'), 
     ] 
    }; 

：

これは私の現在の設定です。すべての画像が処理されるようにするにはどうすればよいですか？ CSSと画像の両方をエントリーポイントとして含めるために.jsファイルを書くべきでしょうか、それともこれを回避する方法がありますか？

Answer 1

require()文をエントリポイント.scssに追加することも、提案するように別のファイルを作成することもできます。私は後者をうまくやった。

entry: { 
    "styles": ["./assets/css/lib.scss", "./assets/img/whatever.png"] 
}, 

：

もう一つの他のオプションは、このようなあなたのエントリポイントとしてアレイを提供することです