web-dev-qa-db-ja.com

PNGファイルを無視するWebpackファイルローダー

Webpackファイルローダーを介してすべての画像ファイルを出力しようとしていますが、webpackはPNG拡張子の画像を無視しています。構成はJPGファイルで正しく機能します。

私のwebpack設定：

const path = require('path');

const PATHS = {
    src: path.join(__dirname, 'src'),
    img: path.join(__dirname, 'src/img'),
    styles: path.join(__dirname, 'src/styles'),
    build: path.join(__dirname, 'build')
}

module.exports = {
    context: PATHS.src,
    entry: {
        script: ['./scripts/main.js', './styles/main.scss'],
        index: './index.html'
    },
    output: {
        path: PATHS.build,
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /\.scss$/,
            loaders: ["style", "css", "sass"],
            include: PATHS.styles
        }, {
            test: /\.(png|jpg)$/i,
            loader: 'file?name=[path][name].[ext]',
            include: PATHS.img
        }, {
            test: /\.(html)$/,
            loader: 'file?name=[path][name].[ext]'
        }]
    }
};

ソースフォルダ構造

webpackfrontendwebpack-file-loader
7
cermatej

PNGファイルの問題はPNG画像のインポートにあり、どちらもhtml src属性でインポートされましたが、JPG画像はcssのurl属性でインポートされました。したがって、問題は画像形式にはありませんでした。

Htmlローダーにextract-loaderとhtml-loaderを追加することで修正されました。 Webpackは、正しく理解していれば、htmlのsrc属性にも一致します。

HTMLローダーの構成：

loader: 'file-loader?name=[path][name].[ext]!extract-loader!html-loader'

画像のインポート方法についてご指摘いただきありがとうございます。

2
cermatej

ローダー自体に問題がある可能性がありますurl-loader

{ test: /\.(png|jpg|jpeg)$/, loader: 'url-loader?limit=10000' }
0
Jorawar Singh
 {
    test: /\.(png|svg|jpg|gif|jpe?g)$/,
    use: [
      {
        options: {
          name: "[name].[ext]",
          outputPath: "images/"
        },
        loader: "file-loader"
      }
    ]
  }
0
Ala'a