如何在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