Webpack：根据条目名称设置我的资产路径

使用webpack，我有一个多页面应用程序，可以处理多个条目。我有这样一个项目树：

-- webpack.config.js
-- src/
    -- first/
        -- main.ts
        -- helper.ts
        -- main.css
        -- index.html
    -- second/
        -- main.ts
        -- main.css
        -- index.html
    -- assets/
        -- myAsset1.png
        -- myAsset2.png
        -- myAsset3.png

我想要整洁有序的东西。为此，我每次为

名称

或

文件名

添加

[name]/…

，如下所示：

-- webpack.config.js
-- src/
    -- first/
        -- main.ts
        -- helper.ts
        -- main.css
        -- index.html
    -- second/
        -- main.ts
        -- main.css
        -- index.html
    -- assets/
        -- myAsset1.png
        -- myAsset2.png
        -- myAsset3.png

const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const path=require（'path'）；
module.exports={
条目：{
第一个：'./src/first/main.ts'，
第二个：'./src/second/main.ts'，
},
输出：{
path:path.resolve（uu dirname，'dist'），//输出目录
文件名：'[name]/script.js'，//生成的包的名称
公共路径：“/”，
},
模块：{
规则：[
//打字稿
{
测试：/\.ts$/,，
加载器：“ts加载器”，
选项：{
仅CompileBundledFiles:true，
},
},
//风格
{
测试：/\.s？[ac]ss$/,，
使用：[
MiniCssExtractPlugin.loader，
{
加载器：“css加载器”，
},
{
加载器：“postss加载器”，
选项：{
sourceMap:true，
},
},
{
加载程序：“解析url加载程序”，
},
{
加载器：“sass加载器”，
},
],
},
//字体和图像
{
测试：/\（woff（2）？ttf？eot？jpg？png？svg？md）（\？v=\d+\.\d+\.\d+）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
限额：8192，
名称：'[name].[ext]'，
},
},
],
},
],
},
决心：{
模块：['node_modules'，path.resolve（process.cwd（），'src'），
扩展名：['.ts'，'.js']，
},
插件：[
新HtmlWebpackPlugin({
模板：path.join（process.cwd（），'src/first/index.html'），
是的，
块：['first']，
文件名：“first/index.html”，
}),
新HtmlWebpackPlugin({
模板：'./src/second/index.html'，
是的，
块：['second']，
文件名：“second/index.html”，
}),
新的MinicsSextract插件({
文件名：'[name]/style.css'，
chunkFilename:“[name]/style.css”，
}),
],
};

结果将是：

-- dist/
    -- first/
        -- script.js
        -- style.css
        -- index.html
    -- second/
        -- script.js
        -- style.css
        -- index.html
    -- myAsset1.png
    -- myAsset2.png
    -- myAsset3.png

但是，我希望文件夹名称中的资产与导入它的条目一致。实际上，

myAssets1.png

和

myAssets2.png

是从

first

文件夹的

main.ts

导入的，而

myAssets3.png

是从

second

文件夹的

main.ts

导入的

-- dist/
    -- first/
        -- script.js
        -- style.css
        -- index.html
        -- myAsset1.png
        -- myAsset2.png
    -- second/
        -- script.js
        -- style.css
        -- index.html
        -- myAsset3.png

---

如何根据条目名称设置我的资产路径？

为了指定正在处理的资产将保存在您所需的位置，应该发生以下几件事：

您需要确定哪个入口点是此文件的颁发者

将其作为

resourceQuery

使用

文件加载器

的

名称

功能中的

资源查询

指定路径

为了实现1,2，您可以创建一个自定义加载程序，它将提取颁发者并附加查询

//entry-dir-injector-loader.js
const path=require（'path'）；
函数递归（m）{
if（m.issuer&&m.issuer.context）{
返回递归发行人（m.issuer）；
}else if（m.context）{
返回m.context；
}否则{
返回false；
}
}
module.exports=函数（内容）{
const entry=recursiveIssuer（此._模块）；
const entryRelativePath=path.relative（this.rootContext，entry）.replace（'src/'，''）；
this.resourceQuery=`？entryDir=${entryRelativePath}`；
返回内容；
};

然后将

名称

指定为函数，提取查询

module.exports={
模块：{
规则：[
{
测试：/\（woff（2）？ttf？eot？jpg？png？svg？md）（\？v=\d+\.\d+\.\d+）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
限额：8192，
名称（resourcePath、resourceQuery）{
const entryDir=resourceQuery
.子串（1）
.split（“&”）
.filter（（key）=>key.startsWith（'entryDir='））
.map（（key）=>key.split（'='）.pop（）
.加入（“”）；
返回path.join（entryDir，`[name].[ext]`）；
},
},
},
{
加载器：'./entry dir injector loader.js'，
},
],
},
],
},
};

事实上，我的解释遗漏了一部分。所有资产都位于src的同一文件夹中。所以我不能这样检查。这就是为什么我想从条目名称中进行检查。我更新了我的问题。项目树更清晰@Felixmosh检查第三个参数，它应该包含需要您的资产的文件。第三个参数为我提供了项目的路径

C:\Users\PierBJX\Documents\TestProject

您接受带查询的解决方案吗？因此，您需要在资产的导入中指定`将图像从“./path/to/image.png？dir=second”导入实际上，我所做的并不能真正做到这一点