webpack 可以在导出时保留子模块的路径吗? [英] Can webpack keep child module's path while exporting?

问题描述

假设我有一个项目，结构是这样的

Suppose I have a project,which structure is like this

projectFolder
--index.html
--img
--js
--childMod
    --modA
        --index.html
        --img
        --js

在 webpack 多个页面的正常配置中.所有图像包括子模块中的图像将被放置在同一个文件夹中，像这样

In normal config for webpack multiple pages.all images include images in child module will be place into the same folder,like this

buildFolder
--index.html
--modA.html
--allImgs
--bundle.js
--modA.bundle.js

我想让 webpack 保持项目结构，像这样

I want webpack keep the project structure,like this

buildFolder
--index.html
--imgs
--bundle.js
--childMod
    --childModImgs
    --modA.html
    --modA.bundle.js

我的目标是，webpack 可以识别资源的路径，如果它在 childMod 中，那么它们将被输出并放置在 childMod 的文件夹中，而不是一起放在一个文件夹中.如何制作?

My target is,webpack can recognize the resource's path,if it is inside childMod,then they will be output and placed in childMod's folder,not all together in one folder. How to make it?

推荐答案

来自 thisGithub 评论，是的，您可以为文件加载器执行此操作:

From this Github comment, yes you can do it for the file loader:

file?name=[path][name].[ext]&context=/the/root/path

这会将文件 /the/root/path/dir/file.png 复制到 /output-directory/dir/file.png.

This copies the file /the/root/path/dir/file.png to /output-directory/dir/file.png.

在 Webpack 配置中，它可能看起来像:

In a Webpack config it might look like:

  { test: \.png$/, loader: "file?name=[path][name].[ext]&context=/the/root/path" },

对于 CSS 和 Javascript 之类的资产，它们通过其他捆绑和缩小数据的加载器传递，不，没有办法做到这一点.这是没有意义的，因为 Javascript 文件可能来自整个项目的各个文件夹.

For assets like CSS and Javascript that are passed through other loaders that bundle and minify the data, no, there's no way to do this. It wouldn't make sense because the Javascript files can come from various folders across the project.

这篇关于webpack 可以在导出时保留子模块的路径吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！