Question

我在css中有像url（images / image1.jpg）的图像路径，加载器定义为

{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },

我面临的问题是，在构建过程之后，图像被复制到相应的文件夹，但路径指向相对于css文件位置的images / image1.jpg。我希望它相对于根目录。

我尝试在名称查询参数中添加一个前导/，它部分修复了问题

{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },

但是当我将文件移动到子文件夹时，它仍指向域的根目录而不是文件夹。

你能告诉我配置中缺少什么吗？

这是webpack配置

'use strict';

var webpack = require('webpack'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  OpenBrowserPlugin = require('open-browser-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path'),
  srcPath = path.join(__dirname, 'src'),
  jsDestPath = 'scripts/';

module.exports = {
  target: 'web',
  cache: true,
  entry: {
    common: ['react', 'react-router', 'alt', 'es6-promise'],
    offline: path.join(srcPath, 'libs/offline.min.js'),
    materialize: path.join(srcPath, 'libs/materialize.js'),
    css3_animate_it: path.join(srcPath, 'libs/css3-animate-it.js'),
    app: path.join(srcPath, 'App.js')
  },
  resolve: {
    root: srcPath,
    extensions: ['', '.js'],
    modulesDirectories: ['node_modules']
  },
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '',
    filename: jsDestPath + '[name].js',
    library: ['Example', '[name]'],
    pathInfo: true
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel?cacheDirectory'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      /*{
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader?limit=5' // inline base64 URLs for <=8k images, direct URLs for the rest
      },*/
      { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },
      {
        test: /\.rt/,
        loader: "react-templates-loader"
      }
    ],

  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('common', jsDestPath + 'common.js'),
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'src/index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080',
      browser: 'Chrome'
    }),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("styles/style.css", {
      allChunks: true
    })
  ],

  debug: true,
  //devtool: 'eval-source-map',//'eval-cheap-module-source-map',
  devServer: {
    contentBase: './build',
    historyApiFallback: true
  }
};

Answer 1

删除publicPath: '',或将其设置为publicPath: '/',并要求提供图片喜欢这个let imgSrc = require('../../img/image.png');通过相对路径（从你试图要求图像的地方）。

它应该被解析为{publicPath}/images/[name].[ext] 我希望它能奏效。

Answer 2

您需要在图片网址前加~前缀，否则会将其视为相对于CSS路径。 ~触发了webpack的正常模块解析。 More info in the CSS loader docs here.

在webpack的url-loader中指定目标文件夹

2 个答案: