如何解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况？-JavaScript中文网-JavaScript教程资源分享门户

如何解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况？

在前端开发中，我们经常会使用 webpack 来打包项目。webpack 提供了很多插件来优化我们的打包流程，其中 HtmlWebpackPlugin 就是常用的一个插件，它可以将我们的打包结果输出为一个 html 文件，并自动添加引用我们打包后的 js 文件。

然而，在使用 HtmlWebpackPlugin 的过程中，我们有可能会遇到一个问题——打包完后生成的 html 文件中引用的 CSS 文件路径不正确。这是因为 HtmlWebpackPlugin 默认使用了相对路径，但如果我们的 css 文件不是和 html 文件在同一个目录下，那么就会导致路径不正确。

那么，如何解决这个问题呢？下面就来分享一下解决方案。

解决方案

在 HtmlWebpackPlugin 中，其实有一个非常实用的选项——publicPath，它可以帮助我们设置打包后 html 中引用资源的根路径。我们可以将其设置为一个绝对路径，这样就可以确保路径的正确性。

具体的操作步骤如下：

在 webpack 的配置文件中加入 publicPath 选项，例如：

module.exports = {
  // ...
  output: {
    // ...
    publicPath: '/',
  },
  // ...
}

这里我们将 publicPath 设置为根路径 /，也可以根据实际情况设置为其他路径。

在 HtmlWebpackPlugin 配置中加入 publicPath 选项，例如：

plugins: [
  new HtmlWebpackPlugin({
    // ...
    publicPath: '/',
  }),
  // ...
]

这里的 publicPath 选项和上一步中的作用是一样的，都是为了设置根路径。

通过以上两个步骤，我们就可以解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况了。

示例代码

下面是一个完整的示例代码：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'My App',
      publicPath: '/',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="/static/css/main.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/main.a5b5def3.js"></script>
  </body>
</html>

注意，这里的 CSS 和 JS 文件都是放在 dist/static 目录中的。

总结

通过以上的步骤，我们就可以解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况了。同时，我们也了解了如何使用 publicPath 选项来设置打包后 html 中引用资源的根路径，这对我们在前端开发中处理路径问题非常有帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659f85cfadd4f0e0ff81b4b6

如何解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况？

纠错反馈