Webpack无法加载背景图片。

Question

我正在尝试加载一张图片：

background: transparent url("../img/select-icon.png") no-repeat center right 8px;

我的style.scss不起作用了

这是我的webpack.config文件：

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: [
        './assets/js/index'
    ], 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        })

    ],

    module: {
        loaders: [
            {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader"
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader!sass-loader"
            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                loaders: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                loader: 'file-loader'
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
          'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),
        }, 
    }   
}

我正在使用file-loader，但浏览器中呈现的URL与图像的URL不匹配。

我认为我没有使用源映射：https://github.com/webpack/style-loader/issues/55 有人能帮忙吗？

- Alessander França

---

你能在浏览器中输入错误的网址吗？ - Quarter2Twelve

背景：透明的url（96ab4c4434475d0d23b82bcfc87be595.png）不重复中心右8px; - 这个哈希指向http://localhost//app/contacts/form/add/1/96ab4c4434475d0d23b82bcfc87be595.png。但我认为这应该指向http://localhost/static/img/96ab4c4434475d0d23b82bcfc87be595.png。 - Alessander França

Answer 1

为了将url('...')解析为文件的输出路径，您需要在css-loader之前使用resolve-url-loader。

在您的webpack.config.js中，您需要进行以下更改：

//...
module: {
    loaders: [
        {
            test: /\.css$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader"
        },

        {
            test: /\.scss$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
        },
        //...
    ]
}
//...

作为可选配置，您可以指定 file-loader 使用的文件名模板。因此，您可以使用 /img/select-icon.png 代替 96ab4c4434475d0d23b82bcfc87be595.png。

在您的 webpack.config.js 中，file-loader 的默认选项正在使用。这意味着输出文件名使用模板 [id].[ext]。其中 [id] 是块 id，[ext] 是文件的扩展名。

要指定输出文件名模板，您需要将 name 参数传递给加载器的查询中。

到目前为止，require('../img/select-icon.png') 应该返回 '/img/select-icon.png'。 resolve-url-loader 将使用此值。

//...
module: {
    loaders: [
        //...
        {
            test: /\.png$/,
            loader: 'file-loader',
            query: {
                name: 'img/[name].[ext]'
            }
        },
        //...
    ]
}
//...

- nyrd

---

这解决了我的一个问题。我正在使用Django后端和React作为前端，然后我的URL呈现为：localhost/app/img/select-icon.png，但应该是localhost/static/img/select-icon.png。我能用static替换app吗？ - Alessander França

我已经将 'img/[name].[ext]' 替换为 '/static/img/[name].[ext]' 并且成功了。谢谢 =) - Alessander França

Answer 2

我使用Angular Class Starter Pack，所以不知道你是否有“helpers”类可用。

在webpack配置/ common中添加一个helper常量。

const helpers = require('./helpers');

在你的决心中：添加

root: helpers.root('src'),

在加载器中添加：

  {
    test: /\.html$/,
    loader: 'raw-loader',
    exclude: [helpers.root('src/index.html')]
  },

现在将 SCSS 加载器更改为此

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader']
  },

现在我不确定你是否仍然能够使用 "include.path"，我只是在网址中添加了 "assets"，就像这样 "url('./assets/img/whatever.png')。

希望这有所帮助，祝好运。

- cptnk