Question

如何为我的gutenberg块设置webpack，以提取多个css文件并根据样式表的名称将其捆绑。

Zack Gordon在webpack 3中为此使用了Extract Text Plugin，它的工作原理很吸引人。但是使用webpack 4时，我不得不切换到mini-css-extract-plugin，在该插件中我无法再使用它了。

请在下面查看我当前的设置，以便您可以看到我正在尝试做的事情。

这是我的项目文件夹：

Plugin folder
|-- [src]
|   |-- [block1]
|   |   |-- block1.js
|   |   |-- style.scss
|   |   `-- editor.scss
|   |-- [block2]
|   |   |-- block2.js
|   |   |-- style.scss
|   |   `-- editor.scss
|   `-- index.js
`-- [build]
    |-- index.js
    |-- style.build.css
    `-- editor.build.css

在block1.js / block2.js中：

import './style.scss'
import './editor.scss'

在index.js中：

import './block1'
import './block2'

在webpack.config.js中：

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...defaultConfig,
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                style: {
                    name: 'style',
                    test: /style\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
                editor: {
                    name: 'editor',
                    test: /editor\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin({
            filename: 'blocks.[name].build.css'
            }),
    ],
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.s?css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },

        ]
    },
};

预期输出：

[build]
|-- blocks.editor.build.css
|-- index.js
|-- blocks.style.build.css

当前输出：

[build]
|-- blocks.editor.build.css
|-- editor.js
|-- index.js
|-- blocks.style.build.css
|-- style.js
`-- (...and indentical map files)

当前设置吐出了我不需要的两个额外的js文件（style.js / editor.js），但是最大的问题是它还导致该块无法在Wordpress中加载。当我不使用splitChunks时，它会加载，但是所有css都捆绑在一个文件中……我需要两个文件。

比较：没有splitChunks的index.js：

/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })

带有splitChunks的index.js：

/******/    // add entry module to deferred list
/******/    deferredModules.push(["./src/index.js","editor","style"]);
/******/    // run deferred modules when ready
/******/    return checkDeferredModules();
/******/ })

Answer 1

实际上您不需要多个条目。使用当前解决方案中的配置，您只需要一个选项即可使其按您想要的方式工作。 filename 选项必须在块名称的基础上动态设置。

plugins: [
    new MiniCssExtractPlugin({
      filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
    })
],

这将为每个块创建一个 .css 文件。由于您已经有了 style 和 editor 块，它会创建 style.css 和 'editor.css'，每一个都有相应的 css 或 scss 导入到 js 文件中。

检查 documentations

它看起来像这样，唯一的添加是将 filename 更改为 MiniCssExtractPlugin 选项，并删除了 css 条目。这应该有效。

module.exports = {
    ...defaultConfig,
    entry: {
        index: path.resolve( process.cwd(), 'src', 'index.js' ),
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                style: {
                    name: 'style',
                    test: /style\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
                editor: {
                    name: 'editor',
                    test: /editor\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin({
          filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
          // chunkFilename: "[name].css"
        })
    ],
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.s?css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },

        ]
    },
};

Answer 2

查看我的评论，更改设置，现在可以使用：（好的，它不再是单个条目了，但是::）

项目文件夹：

supp-files/{file}.pk1

在css.js中：

Plugin folder
|-- [src]
|   |-- [block1]
|   |   |-- block1.js
|   |   |-- style.scss
|   |   `-- editor.scss
|   |-- [block2]
|   |   |-- block2.js
|   |   |-- style.scss
|   |   `-- editor.scss
|   `-- index.js
|   `-- css.js
`-- [build]
    |-- index.js
    |-- style.build.css
    `-- editor.build.css

在webpack.config.js中：

import './block1/style.scss'
import './block1/editor.scss'
import './block2/style.scss'
import './block2/editor.scss'

输出构建文件夹：

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...defaultConfig,
    entry: {
        index: path.resolve( process.cwd(), 'src', 'index.js' ),
        css: path.resolve( process.cwd(), 'src', 'css.js' ),
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                style: {
                    name: 'style',
                    test: /style\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
                editor: {
                    name: 'editor',
                    test: /editor\.s?css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin({
            filename: 'blocks.[name].build.css'
            }),
    ],
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.s?css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },

        ]
    },
};

webpack mini-css-extract-plugin =>在单个条目上输出多个CSS文件

2 个答案: