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选项对象的filename属性更改为../../[name].css，则现在将其输出到/home/terribledev/projects/yourcssfile.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指定输出目录

2 个答案: