如何用"mini-css-extract-plugin"指定输出目录？

Question

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

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

Answer 1

让我们假设以下配置：

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"
    })
  ]
  // ...
}

Answer 2

为了在构建目录中指定输出路径，我在文件名中包含了子目录：

const path = require('path');

module.exports = {
    // ...
    output: {
      path: path.resolve(process.cwd(), 'build'), // should be an absolute path
      filename: 'js/[name].js', // relative to output.path
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css", // relative to output.path
        }),
    ],
    // ...
}

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

如何用"mini-css-extract-plugin"指定输出目录？

How to specify output directory with "mini-css-extract-plugin"?

webpack

webpack-4

mini-css-extract-plugin