Question

我试图了解webpack的工作方式。为此，我创建了一个非常简单的示例：

文件夹结构

webpack.config.js

const path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  devtool: 'source-map',
};

index.html

<body>
  <div>
    <img src="../src/images/lion.png" alt="">
  </div>

  <script src="./bundle.js"></script>
</body>

您可以看到index.html位于 dist 文件夹中。如果在浏览器中打开index.html，它将显示图像。但是，如果我运行 dev-server ，它将启动浏览器，显示index.html，但找不到该图像。控制台显示此错误：

有人知道为什么webpack无法显示图像吗？

Answer 1

您需要使用html-loader https://webpack.js.org/loaders/html-loader/，以便在编译时正确地require()中url的每个<img src="<url>">为您服务，否则浏览器会尝试访问它在运行时无法到达的路径。

另外，在使用html-loader时，由于它将需要img个网址，因此您需要一个特定的加载器，该加载器可以理解图像格式，可以使用https://webpack.js.org/loaders/url-loader/或{{3 }}

否则，您将需要将所有图像复制到dist文件夹，您可以在运行时在运行时从html公开访问它们，而无需html-loader或require调用。但是复制本身可以通过另一个加载器https://webpack.js.org/loaders/file-loader/再次完成。

而且您仍然无法访问像../src这样的编译级路径，因为当webpack运行时，它将所有内容编译到最终的公用文件夹中，在该文件夹中您只有主js文件，并且所有require()根据Webpack配置中dist或loaders属性中的规则，将依赖项放入相同的final（plugins）文件夹中。

Webpack开发服务器不显示嵌入式图像

1 个答案: