Webpack 使用迷你css提取插件指定输出目录

我正在使用mini css extract插件将css从我们的包中提取到一个文件中。我需要将该文件放到文件系统中的其他位置

---

如何配置mini css extract插件，将css文件放到与js包不同的路径。

让我们假设以下配置：

webpack.config.js

module.exports={
// ...
输出：{
path:path.resolve（\uu dirname，“dist”）//这是默认值
},
插件：[
新的MinicsSextract插件({
文件名：“[name].css”//相对于您的output.path更改此文件名！
})
]
// ...
}

例如，您的输出路径将解析为

/home/teribledev/projects/some project/dist

如果将

MiniCssExtractPlugin

选项对象的filename属性更改为

。/../[name].css

，它现在将输出到

/home/terribledev/projects/yourcssfile.css

，例如：

module.exports={
输出：{
path:path.resolve（uu dirname，“dist”）
},
插件：[
新的MinicsSextract插件({
文件名：“../../[name].css”
})
]
// ...
}

要在生成目录中指定输出路径，我在文件名中包含子目录：

const path=require（'path'）；
module.exports={
// ...
输出：{
path:path.resolve（process.cwd（），'build'），//应该是绝对路径
文件名：'js/[name].js'，//相对于output.path
},
插件：[
新的MinicsSextract插件({
文件名：“css/[name].css”，//相对于output.path
}),
],
// ...
}

---

我已经在Webpack版本4和版本5中成功地测试了这一点。查看文档以了解更多信息。

您不能这样做。您只能指定相对于在Web包配置中指定的输出文件夹的文件夹。生成成功后，您需要手动/自动复制如果要自定义文件名，该怎么办？有没有办法让输出文件名与初始css文件名（而不是保存导入语句的js文件名）匹配？如何保存在

dist

目录中的

css/

目录中？@Sisir查看我的答案