javascript - Webpack 文件加载器不导出图像

Question

我正在为我的 PHP 和 React 项目使用 webpack。我想使用 webpack 文件加载器从 .scss 文件加载背景图像，但由于某种原因我不知道， img 文件夹不会被复制/导出到我的 dist-文件夹。下面是 webpack.config.js:

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin');

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var extractPlugin = new ExtractTextPlugin({
   filename: 'main.css'
});

module.exports = {
   entry: ['babel-polyfill', SRC_DIR + "/app/index.js"],
   output: {
      path: DIST_DIR + "/app",
      filename: "bundle.js",
      publicPath: "/dist"
   },
   watch: true,
   module: {

       rules: [
          {
            test: /\.js$/,
            include: SRC_DIR,
            loader: "babel-loader",
            exclude: /node_modules/,
            query: {
                presets: ["react", "es2015", "stage-2"], plugins: ["transform-decorators-legacy", "transform-class-properties"]
            }
        },
        {
            test: /\.scss$/,
            use: extractPlugin.extract({
                fallback: "style-loader",
                use:  ["css-loader", "sass-loader", "resolve-url-loader"]
              })                
        },
        {
            test: /\.css$/,
            use:  ["css-loader", "sass-loader", "resolve-url-loader"]
        },
        {
            test: /\.(jpg|png)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: 'img/'
                    }
                }
            ]
        }                      
      ]        
},
plugins: [
    extractPlugin,
    new WatchLiveReloadPlugin({
        port: 'localhost',
        files: [
            './dist/app/*.css',
            './dist/**/*.js',
            './src/app/**/*.png',
            './src/app/**/*.jpg',
            './src/app/**/.*.scss',
            './src/**/*.php',
            './src//*.js'
        ]
    })    
  ]
};

我也尝试过 loader: 'file-loader?name=/dist/img/[name].[ext]', 但没有运气。

我的文件结构是这样的:

-- dist
   -- app
        bundle.js
        main.css
-- src
   -- app
     -- css
        main.scss
     -- img
        someimage.jpg

然后在我的 .scss 中我尝试了这个:

background-image: url('/img/someimage.jpg');

有人知道这里出了什么问题吗？

Answer 1

尝试将图像文件导入您的脚本文件之一，例如

import '/path/to/img.jpg';

这会让 Webpack 了解依赖关系并复制它。