ファイルローダーは対処イメージではありません

Question

私はgulpからwebpackへの移行を行っています。で処理したい画像をstatic/imgフォルダに入れて、build/public/imgフォルダにコピーしています。 file-loader私はこれに何を使用しますか？問題は、画像がコピーされていないことです。実際、このローダーはビルド中に無視されているようです。

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const path = require('path'); 

module.exports = { 
    context: path.resolve(__dirname, 'static'), 
    entry: ['./js/frontend.js','./sass/app.scss'], 
    output: { 
    path: path.join(__dirname, 'build/public'), 
    filename: 'js/frontend.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     loader: [ 
      'file-loader?name=img/[name].[ext]', 
      'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     }, 
     { 
     test: /\.(sass|scss)$/, 
     loader: ExtractTextPlugin.extract({ 
      use: [{ 
      loader: 'css-loader', 
      options: { 
       sourceMap: true 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       sourceMap: true 
      } 
      }] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ 
     filename: 'css/styles.css', 
     allChunks: true 
    }) 
    ], 
    devtool: 'source-map' 
}; 

Answer 1

私はこれが解決策または回避策であるかどうかわからないんだけど、私がやったことはImageminPluginでCopyWebpackPluginを使用している：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const ImageminPlugin = require('imagemin-webpack-plugin').default; 
const path = require('path'); 

module.exports = { 
    context: path.resolve(__dirname, 'static'), 
    entry: ['./js/frontend.js','./sass/app.scss'], 
    output: { 
    path: path.join(__dirname, 'build/public'), 
    filename: 'js/frontend.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(sass|scss)$/, 
     loader: ExtractTextPlugin.extract({ 
      use: [{ 
      loader: 'css-loader', 
      options: { 
       sourceMap: true 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       sourceMap: true 
      } 
      }] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new CleanWebpackPlugin('build/public'), 
    new ExtractTextPlugin({ 
     filename: 'css/styles.css', 
     allChunks: true 
    }), 
    new CopyWebpackPlugin([ 
     { 
     from: 'img', to: 'img' 
     } 
    ]), 
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }) 
    ], 
    devtool: 'source-map' 
}; 

Answer 2

あなたがどこかの画像を必要としない場合は、 Webpackはそれらが存在することを知らず、それらを処理しません。

// load assets 
function requireAll(r) { r.keys().forEach(r); } 
requireAll(require.context('img/', true));