时间戳

首页 > 解决方案 > publicPath: "/static/" 在 Webpack 中有什么作用？

javascript - publicPath: "/static/" 在 Webpack 中有什么作用？

问题描述

我有一个 React、express、mongo、webpack 应用程序webpack.config.js，在output对象中，有如下内容：

  output: {
    filename: "bundle.js",
    path: __dirname + "/dist/bundle/",
    publicPath: "/static/",
  }

现在，我知道filename是最终捆绑的代码，path捆绑将在哪里，但是呢publicPath: "/static/"？

publicPath文档说-

它允许您为应用程序中的所有资产指定基本路径。

例如，在开发中，我们可能有一个assets/文件夹，它位于索引页面的同一级别。这很好，但是如果我们想在生产环境中将所有这些静态资产托管在 CDN 上怎么办？


我不太明白。我没有assets/文件夹，但我的资产在public/目录中。它里面有media和stylesheets文件夹。

而且我也不明白在我的views/index.ejs文件中发生了什么。我的应用程序中没有index.html文件，而是index.ejs文件。看起来对吗？好吧，该应用程序似乎正在运行，但我似乎无法理解如何。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='/static/bundle.css' />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <script src="https://kit.fontawesome.com/afb88cf987.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

请帮帮我。我多年来一直坚持这一点。

标签： javascriptwebpackejs

解决方案

publicPath指的是你的资产包从你所在的状态到哪里index.html，所以 webpack 可以为你设置路径。例如。

dist/
     index.html
     bundle/
          bundle.js
          bundle.css

在这种情况下，它将是：publicPath: "./bundle"

推荐阅读