Question

下一个js最近添加了public folder functionality，其本质上可以解析如下网址：

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

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

我试图在一个使用webpack的非下一个js项目中复制此代码，最初使用publicPath属性，但是我丢失了某些东西，或者这不是它的完成方式。因此，问题就来了：给定这样的项目结构，无论我在public中的项目中处于什么位置，如何将上述示例解析到我的prod / dev文件夹中？

示例项目结构

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

Answer 1

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

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

这是一个棘手的解决方案，因为webpack不会仅识别'/'别名，并且您需要设置的别名数量与公用文件夹中的文件夹数量一样多。示例：

   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'),
        }
    },

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

如何使用webpack复制下一个js“公共”文件夹的行为？

1 个答案: