Webpack 帕格犬需要图片（网页包）

帕格犬需要图片（网页包）

pug+网页包中的图像处理问题。 在帕格的前面，我不通过加载器处理图片。我使用WebpackCopyPlugin，并编写了绝对路径

就像这样：

-让imgPath='/assets/img/'
img（src=imgPath+'icons/logo/boto.agency.b.svg'）

当我建立这个项目时，WebpackCopyPlugin复制了所有的图片，帕格用正确的路径编译，一切都很好。 现在我需要通过加载器处理图片。根据文档，我需要这样写路径： img（src=require（'./img.png'）） 但通常情况下，它并不起作用。 我发现了几个场景。在src/assets/img文件夹中有几个图片

1.

img（src=require（'../../../../../assets/img/1-1.png'））

或

img（src=require（`@img/1-1.png`））
//“@img”：path.resolve（_dirname，”../../src/assets/img/）

一切正常，在组装过程中，我们有1个文件1-1.png。这里我不在require中使用变量，因此这些选项不合适

2.开始使用变量：

-让文件名='1-1.png'
img（src=require（`@img/${fileName}`）

或

img（src=require（`../../../../../../../assets/img/${fileName}`）

或

img（src=require（`@img/`+fileName））

或者使用mixin

在开发模式下，一切正常。在项目构建之后，会发生以下情况-文件加载器复制文件夹中的所有文件，尽管我只指定了1。 事情是这样的：

文件加载程序测试：/\（png | jpg | gif | svg）$/，

• 资产
  • img
    • 1-1.png
    • 2-2.jpg
    • 图标
      • 3.svg
    • 照片
      • 3.png
      • 3.jp2
      • 3.jxr

项目构建后，文件夹public（dist）/assets/img中将包含除3.jp2 3.jxr之外的所有文件（3.png和3.svg也将被复制，即使它们位于文件夹中）。此选项也不适用。我只想接收我指定的那些文件

3。开始试验

-let fileName='img/1-1.png'
img（src=require（`../../../../../../../../assets/${fileName}`）

我在dev和build中都遇到错误：

抛出新错误（'已调用回调'）； ^ 错误：已调用回调

-let fileName='img/1-1.png'
//“@”：path.resolve（_dirname，“../../src/assets/”）
img（src=require（`@/${fileName}`）

这也是一个错误

4.

-让文件名='1-1.png'
-让basePath='../../../../assets/img/'
-让路径=基本路径+文件名
img（src=require（路径））

或

-让别名路径='@/img/'
-让路径=别名路径+文件名
img（src=require（路径））

错误：找不到模块“../../../../assets/img/1-1.png”

-let fileName='img/1-1.png'
-让basePath='../../../../assets/'
-让路径=文件名+基本路径2
img（src=require（路径））

错误：找不到模块“../../../../assets/img/1-1.png”

对于任何文件加载器配置，这都取决于我是否在equire中使用变量

有什么问题

我的网页包配置：

/*基本配置：
========================================================================== */
const webpack=require（'webpack'）；
const path=require（'path'）；
常数fs=要求（'fs'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const{VueLoaderPlugin}=require（'vue-loader'）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）；
const BundleAnalyzerPlugin=require（'webpack-bundle-analyzer'）。BundleAnalyzerPlugin；
//主常数。请随意更改
const isDev=process.env.NODE_env==“开发”；
常数isProd=！isDev；
常量路径={
src:path.join（_dirname，'../../src'），
dist:path.join（uu dirname，（isProd？'../../public'：'../../dist'）），
webpack:path.join（_dirname，'../../webpack'），
资产：“资产/”，
};
const fileName=ext=>isDev`[name].${ext}`:`[name].[hash].${ext}`
常量插件=（类型）=>{
常数基=[
新的VueLoaderPlugin（），
新的MinicsSextract插件({
文件名：`${path.assets}css/${filename（'css'）}`，
}),
新的webpack.ProvidePlugin({
“$”：“jquery”，
“jQuery”：“jQuery”，
'window.jQuery'：'jQuery'，
}),
新的CopyWebpackPlugin({
模式：[
//{from:${PATHS.src}/${PATHS.assets}img`，到：${PATHS.assets}img`，
{from:${path.src}/${path.assets}字体`，到：${path.assets}字体`，
{from:${path.src}/pages/php`，to:``}，
{从：`${path.src}/static`，到：''}，
]
}),
新的CleanWebPackagePlugin（），
];
开关（类型）{
案例“html”：{
const PAGES_DIR=`${path.src}/PAGES`；
常数页=fs
.readdirSync（页面目录）
.filter（（fileName）=>fileName.endsWith（'.html'）；
推(
…PAGES.map(
（第页）=>
新HtmlWebpackPlugin({
模板：`${PAGES\u DIR}/${PAGES}`，
文件名：第页，
}),
),);
打破
}
“帕格”案：{
const PAGES_DIR=`${path.src}/PAGES/pug/includes/PAGES`；
常数页=fs
.readdirSync（页面目录）
.filter（（fileName）=>fileName.endsWith（'.pug'）；
推(
…PAGES.map(
（第页）=>
新HtmlWebpackPlugin({
模板：`${PAGES\u DIR}/${PAGES}`，
文件名：（page=='index.pug'| | page=='404.pug'？
page.replace（/\.pug/，'.html'）：
`${page.split（'.'）[0]}/index.html`），
}),
),);
打破
}
}
const PAGES_PHP=fs
.readdirSync（path.src）
.filter（（fileName）=>fileName.endsWith（'.php'）；
推(
…PAGES_PHP.map(
（第页）=>