如何使用 webpack 复制下一个 js "public" 文件夹行为？

Question

Next js 最近添加了 public folder functionality，它本质上解析了这样的 url：

background-image: url(/images/test.png);
<img src="/images/test.png" />;
require("/images/test.png")

从您在源代码中的任何位置到位于项目根目录的 public 目录。

我正在尝试在使用 webpack 的非 next js 项目中复制它，我最初使用 publicPath 属性，但我要么遗漏了一些东西，要么这不是它的完成方式.因此问题是：鉴于这样的项目结构，无论我在 prod / dev 的项目中的什么位置，我如何将上面提到的那些示例解析到我的 public 文件夹？

示例项目结构

public/
  images/
    test.png
src/
  components/
  pages/
webpack.config.js

Answer 1

对此我有一些棘手的解决方案。
将此配置添加到您的 webpack：

   resolve: {
        alias: {
            '/images': path.resolve(__dirname, 'public/images')
        }
    },

这是一个棘手的解决方案，因为 webpack 不会只识别“/”别名，您需要设置与 public 文件夹中的文件夹一样多的别名。示例：

   resolve: {
        alias: {
            '/images': path.resolve(__dirname, 'public/images'),
            '/audio': path.resolve(__dirname, 'public/audio'),
            '/video': path.resolve(__dirname, 'public/video'),
            '/etc': path.resolve(__dirname, 'public/etc'),
        }
    },

注意：您需要它，所以 public 文件夹现在不是 public（或静态，使用 ssr 时可以调用的资产）文件夹。它将包含在捆绑包中。

如何使用 webpack 复制下一个 js "public" 文件夹行为？

How to replicate next js "public" folder behaviour with webpack?

javascript

webpack

next.js