Webpack 为CSS url（）生成另一个文件的url的网页包

我正在使用webpack编译和开发我的Drupal主题，使用Bootstrap4。我使用它捆绑不同的JS库，并将我的sass构建到CSS中，这样我就可以只使用我需要的引导元素，而不是整个shebang

我有一个带有“js”文件夹和“sass”文件夹的源文件夹

我的webpack.config.json如下所示：

const path=require（'path'）；
module.exports={
模式:"发展",，
条目：['./src/js/bootstrap.js'，'./src/sass/style.scss']，
输出：{
文件名：“js/mytheme libraries.js”，
path:path.resolve（_dirname，'.'））
},
devtool：“源地图”，
模块：{
规则：[
{
测试：/\（scss）$/，
使用：[{
加载器：'文件加载器'，//加载文件
选项：{
名称：“style.css”，
outputPath:“./css”，
},
},
{loader:'extract loader'}，
{
加载器：“css加载器”，
选项：{
sourceMap:true
}
}, {
加载器：“postss加载器”，
选项：{
插件：函数（）{
返回[
需要（'autoprefixer'）
];
},
sourceMap:true，
sourceMapEmbed:false
}
}, {
加载器：“sass加载器”，
选项：{
sourceMap:true，
sourceMapEmbed:false，
输出文件：'./css/style.map.css'
}
}]
},
{
测试：/\（ttf | eot | svg | woff（2）？（\？[a-z0-9]+）？$/，
包括：[
解析（uu dirname，“./src/font”）
],
使用：[{
加载器：“文件加载器”，
选项：{
名称：'/sites/all/themes/mytheme/font/[name].[ext]'，
emit文件：false
}
}]
},
{
测试：/\（png | jpg | gif | svg？（\？[a-z0-9]+）？$/，
排除：[
解析（uu dirname，“./src/font”）
],
使用：[{
加载器：“文件加载器”，
选项：{
名称：'/sites/all/themes/mytheme/img/[name].[ext]'，
emit文件：false
}
}]
}
]
}
};

还有我的package.json

{
    "name": "mytheme",
    "version": "1.0.0",
    "description": "Tools for building Bootstrap for the Mytheme Theme.",
    "private": true,
    "scripts": {
        "build-dev": "webpack --config webpack.config.js",
        "cache-clear": "drush @dev cc all"
    },
    "author": "Pryrios",
    "license": "MIT",
    "dependencies": {
        "animated-scroll-to": "^1.3.1"
    },
    "devDependencies": {
        "autoprefixer": "^9.6.1",
        "bootstrap": "^4.3.1",
        "css-loader": "^3.2.0",
        "extract-loader": "^3.1.0",
        "file-loader": "^4.2.0",
        "jquery": "^3.4.1",
        "node-sass": "^4.12.0",
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.3.1",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9"
    }
}

我通过运行“npm run build dev”来构建我的资产，它调用“webpack--config webpack.config.js”，并构建我的style.css和我的js文件。（注意：我没有发出图像/字体文件，因为它们已经在我正在构建的主题内的文件夹中，并且由“./…”从src/sass文件夹引用）

现在，在我的一个CSS文件中，我两次使用相同的背景图像：

.myfirst div{
背景：url（'../../img/point bg.png'）中心5px/2px 10px repeat-y；
}
第二分区{
背景：url（“../../img/point bg.png”）中心5px/2px 10px repeat-y；
}

预期的结果是具有两个CSS声明，如：

.myfirst div{
背景：url（'/sites/all/themes/mytheme/img/point bg.png'）中心5px/2px 10px repeat-y；
}
第二分区{
背景：url（“/sites/all/themes/mytheme/img/point bg.png”）中心5px/2px 10px repeat-y；
}

问题：

但我发现第二个div有不同的图像。路径正确且映像存在，但它不是sass上声明的路径。我已经调查过了，返回的图像是sass中“url（）”中声明的下一个图像

我不明白为什么会这样。我对整个webpack/nodejs环境很陌生，所以我可能做了很多错事。我曾经尝试在调用webpack时使用--profile来检查任何错误，但没有效果

---

？有人能告诉我我在哪里吗？或者至少建议我如何进一步调试这个吗？

我的问题是由于以下原因造成的：

简而言之：extract loader不考虑css loader输出中的文件插值，这会导致最终URL不一致

因为它似乎不会很快得到解决（或者根本不会），我已经转移到迷你css提取插件，它取代了提取加载器+文件加载器

我的网页包配置现在如下所示：

const path=require（'path'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
module.exports={
模式:"生产",，
条目：['./src/js/bootstrap.js'，'./src/sass/style.scss']，
输出：{
文件名：“js/bitbrain libraries.js”，
path:path.resolve（_dirname，'.'））
},
外部：{
jquery：“jquery”
},
插件：[
新的MinicsSextract插件({
文件名：“css/style.css”，
}),
],
模块：{
规则：[
{
测试：/\（scss）$/，
使用：[{
加载器：MiniCssExtractPlugin.loader，
},
{
加载器：“css加载器”，
}, {
loader:'postsss loader'，//运行postsss操作
选项：{
插件：函数（）{//postsss插件，可以导出到postsss.config.js
返回[
需要（'autoprefixer'）
];
},
}
}, {
加载器：“sass加载器”，
选项：{
输出文件：'./css/style.map.css'
}//将Sass编译为CSS
}]
},
{
测试：/\（ttf | eot | svg | woff（2）？（\？[a-z0-9]+）？$/，
包括：[
解析（uu dirname，“./src/font”）
],
使用：[{
加载器：“文件加载器”，
选项：{
名称：'/sites/all/themes/bitbrain/font/[name].[ext]'，
emit文件：false
}
}]
},
{
测试：/\（png | jpg | gif | svg？（\？[a-z0-9]+）？$/，
排除：[
解析（uu dirname，“./src/font”）
],
使用：[{
加载器：“文件加载器”，
选项：{
名称：'/sites/all/themes/bitbrain/img/[name].[ext]'，
emit文件：false
}
}]
}
]
}
};

重要的部分是：

1-安装

npm install --save-dev mini-css-extract-plugin)