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

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

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

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

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

Answer 1

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

Answer 2

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

Answer 3

切换到文件加载器而不是url加载器。图像可能低于25000（25kb）。

如果不修改您的webpack配置，您可以尝试这样做：

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

您应该在资产中看到图片。

内嵌图像加载..webpack

3 个答案: