内联图像加载..webpack答案

【问题标题】：Inline image loading..webpack内联图像加载..webpack
【发布时间】：2017-02-20 15:34:25
【问题描述】：

我正在拔头发……

感觉我什么都试过了。

这是我的 webpack 配置：

    var publicConfig = {
  context: path.join(__dirname, 'src'),
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    './public.jsx',
  ],
  output: {
    path: path.join(__dirname, 'app'),
    filename: 'publicBundle.js',
    publicPath: '/assets/',
  },
  module: {
    loaders: [
        { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
        //{ test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' },
        // { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]' },
        { test: /\.css$/, loader: "style!css" },
        {
          test: /\.(jpg|png)$/,
          loader: 'url?limit=25000'
        },
        { test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader : 'file-loader' } 
    ] 
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

在我的 css 文件中定义图像时，图像被添加到 /assets/ 文件夹中，这正是我想要的……但是，我希望能够从内联调用图像路径（以及 html 视图）。但是图像不会被复制到 /assets/ 除非我从我的 css 文件中定位它们。

我尝试通过以下方式导入它们：

import logo from './images/animus_logo_blacktext.png'

但它仍然没有出现在我的资产中。

内联图像路径的最佳做法是什么？

【问题讨论】：

如何从 CSS 文件中定位它们？

标签： reactjs ecmascript-6 webpack

【解决方案1】：

图片可能很小吗？您在 URL-loader 中配置的限制意味着所有 25000 字节以下的图像都将被内联（作为数据 URI）而不是作为文件提供。大于 25000 字节的文件将由 url-loader 处理，与 file-loader 处理它们的方式相同。

【讨论】：

【解决方案2】：

切换到文件加载器而不是 url 加载器。图片可能低于您的 25000 (25kb) 限制。

不修改你的 webpack 配置你可以试试这个：

import logo from 'file-loader!./images/animus_logo_blacktext.png'

您应该会在资产中看到该图像。

【讨论】：

【解决方案3】：

我想你想试试https://www.npmjs.com/package/copy-webpack-plugin。这是一个将单个文件或整个目录复制到构建目录的 webpack 插件。

【讨论】：