内联图像loading..webpack

Question

我要把头发扯下来..。

感觉我什么都试过了。

这是我的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文件中定义图像时，图像会被添加到/ gets /文件夹，这正是我想要的……但是，我希望能够从内联调用图像路径( html视图也是如此)。但是，这些图像不会被复制到/assets/，除非我从我的css文件中将它们作为目标。

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

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

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

内联图像路径的最佳实践是什么？

Answer 1

有没有可能图像非常小？您在URL加载器中配置的限制意味着所有小于25000字节的图像将被内联(作为数据URI)，而不是作为文件。大于25000字节的文件将被url-loader以与file-loader相同的方式处理。

Answer 2

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

Answer 3

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

无需修改您的webpack配置，您可以尝试以下操作：

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

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