时间戳

首页 > 解决方案 > 如何使用“mini-css-extract-plugin”指定输出目录？

webpack - 如何使用“mini-css-extract-plugin”指定输出目录？

问题描述

我正在使用 将mini-css-extract-pluginCSS 从包中提取到文件中。我需要将该文件放在文件系统中的不同位置。

如何配置将mini-css-extract-pluginCSS 文件拖放到与 JS 包不同的路径？

标签： webpackwebpack-4mini-css-extract-plugin

解决方案

让我们假设以下配置：

webpack.config.js

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, "dist") // this is the default value
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css" // change this RELATIVE to your output.path!
    })
  ]
  // ...
}

您的输出路径将解析为 - 例如 - 的位置/home/terribledev/projects/some-project/dist。

如果将MiniCssExtractPlugin选项对象的文件名属性更改为../../[name].css，它现在将输出到/home/terribledev/projects/yourcssfile.css，例如：

module.exports = {
  output: {
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "../../[name].css"
    })
  ]
  // ...
}

推荐阅读