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 知道依赖并复制它。

Answer 2

CSS/Sass 加载器不会翻译以 / 开头的 URL，因此您的 file-loader 不会在此处应用。

如果您希望它们由 webpack 处理，解决方案是使用相对路径进行导入。请注意，CSS 和 Sass 对相对导入没有特殊语法，因此以下内容是等价的：

url('img/someimage.jpg')
url('./img/someimage.jpg')

如果您希望它们像模块一样被解析，webpack 提供了以~ 开始导入路径的可能性，如sass-loader - imports 所示。