Question

我有这样的演示：我的webpack配置：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: './build',
    publicPath: 'http://localhost:3000/'
  },
  module: {
    rules: [{
      test: /static\.html/,
      use: 'file-loader'
    }, {
      test: /\.png/,
      use: 'file-loader?name=[name].[ext]'
    }, {
      test: /\.css/,
      use: 'file-loader?name=[name].[ext]'
    }],
  },
  resolveLoader: {
    modules: ['node_modules'],
  }
}

这是我的入门app.js：

import './static.html';
import './img.png';
import './index.css';

static.html：

<!DOCTYPE html>
<html>
<head>
  <title>static</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <img src="./img.png">
</body>
</html>

当我运行npm run build时，我有一个构建文件夹。我认为build / static.html应该是

<img src="http://localhost:3000/img.png"> 
<link href="http://localhost:3000/index.css">

但是，实际上build / static.html与static.html相同。 img的src和链接的href都没有改变。

任何人都知道为什么？

====

我知道答案。 Webpack publicPath只适用于输出文件。所以只需要替换bundle.js中的url。

webpackHtmlPlugin无法解决此问题，因为此插件将生成一个html页面，其中包含指向输出bundle.js的脚本链接，我并不需要它。

为了解决这个问题，我编写了一个自定义加载器来动态地转换文件加载器的html页面输出。

Answer 1

file-loader不会更改文件。如果您想要添加publicPath的html文件，则应使用html-webpack-plugin。

Webpack publicPath不起作用

1 个答案: