如何在webpack製作中獲取圖片？

Question

生產文件夾中沒有圖像。有沒有簡單的方法來解決webpack配置中的問題？

packaage.json

"scripts": { 
    "start": "npm run build", 
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback", 
    "build:prod": "webpack -p && cp src/index.html dist/index.html" 
}, 

webpack.config.js

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

const extractPlugin = new ExtractTextPlugin({ 
    filename: '[name].css' 
}); 
const DIST_DIR = path.resolve(__dirname, 'dist'); 
const SRC_DIR = path.resolve(__dirname, 'src'); 

const config = { 
    entry: SRC_DIR + '/App.js', 
    output: { 
     path: DIST_DIR, 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?/, 
       exclude: /node_modules/, 
       include: SRC_DIR, 
       loader: 'babel-loader', 
       query:{ 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       use: extractPlugin.extract({ 
        use: [ 
         { 
          loader: 'css-loader', 
         }, 
         { 
          loader: 'postcss-loader', 
          options: { 
           plugins: (loader) => [ 
            require('autoprefixer')({ 
             browsers: ['last 2 version'] 
            }), 
            require('postcss-flexbugs-fixes')(), 
            require('css-mqpacker') 
           ] 
          } 
         }, 
         { 
          loader: 'sass-loader', 
         } 
        ] 
       }) 
      }, 
      { 
       test: /\.(jpeg|png)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          name: '[name].[ext]', 
          outputPath: 'img/', 
          publicPath: 'img/' 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.(woff2?|svg)$/, 
       use: 'url-loader?limit=10000&name=fonts/[name].[ext]' 
      }, 
      { 
       test: /\.html$/, 
       use: ['html-loader'] 
      } 
     ] 
    }, 
    plugins:[ 
     extractPlugin, 
     new CleanWebpackPlugin(['dist']) 
    ] 
}; 

module.exports = config; 

Answer 1

如果你沒有在應用程序代碼的WebPack使用require('image.jpg');不會解決它（因此它不會移動到您的發行版lder連續）。如果你需要在你的css文件中使用url()的圖片，你需要包含一個url-loader的webpack來解析它。 See more