Question

我想使用webpack将图像加载到前端（反应）

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist/'),
    filename: `[name].bundle.js`,
    // `chunkFilename` provides a template for naming code-split bundles (optional)
    chunkFilename: `[name].bundle.js`

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
         new webpack.DefinePlugin({
        'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
        new HtmlWebpackPlugin({template:'src/index.html'})

  ],
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],
      include: path.join(__dirname, 'src')
    },{
                test: /\.(jpg|png|svg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 25000,
                    },
                },
            },{
            test: /(\.css)$/, 
            use: ['style-loader', 
                     'css-loader']
        },  {test: /\.(jpe?g|gif|svg)$/i, use: ["file-loader"]}
    ]
  }
};

index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    <img src="resourses/css/images/headerImage.jpg"/>
        <script src="vendor.bundle.js"></script>
        <script src="main.bundle.js"></script>
    <img src="resourses/css/images/headerImage.jpg"/>
    </body>
</html>

我的package.json

"webpack": "^3.10.0",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.22.1"
   "file-loader": "^2.0.0",
    "html-webpack-plugin": "^2.30.1",
    "url-loader": "^0.5.7",

这是相同html的图像，但是，我已删除此问题的样式表链接。

我已经在webpack中设置了文件加载器，但是当我在浏览器中看到源文件时仍然没有图像显示。而且我使用了img标签。它也没有给我任何结果。如果您需要更多数据，那么我将编辑该帖子，我们将不胜感激。

在webpack中加载图像

0 个答案: