使用 Gatsby 忽略 mini-css-extract-plugin 的顺序答案

【问题标题】：Ignore order for mini-css-extract-plugin with Gatsby使用 Gatsby 忽略 mini-css-extract-plugin 的顺序
【发布时间】：2021-05-11 21:45:28
【问题描述】：

问题：

控制台充斥着类似的警告：warn chunk commons [mini-css-extract-plugin] Conflicting order。我做了一些研究，发现这些警告可以忽略，因为我使用的是 css-modules 并且我的导入顺序无关紧要。 我发现以下步骤使警告静音不起作用。

所需的解决方案：

在插件配置中设置ignoreOrder = true 选项。

我的尝试：

我关注了一个类似的问题here 并将代码添加到我的gatsby-node.js：

const path = require('path')

module.exports.onCreateWebpackConfig = ({
    stage,
    actions,
    getConfig
}) => {
    actions.setWebpackConfig({
        resolve: {
            modules: ['node_modules', path.resolve(__dirname, 'src')],
            alias: {
                'basic-info': path.resolve(__dirname, 'src/app/routes/basic-info'),
                'situation-analysis': path.resolve(__dirname, 'src/app/routes/situation-analysis'),
                'select-drivers': path.resolve(__dirname, 'src/app/routes/select-drivers'),
                'define-vision': path.resolve(__dirname, 'src/app/routes/define-vision'),
                'rate-drivers': path.resolve(__dirname, 'src/app/routes/rate-drivers'),
                'affinity-groups': path.resolve(__dirname, 'src/app/routes/affinity-groups'),
                'define-objectives': path.resolve(__dirname, 'src/app/routes/define-objectives'),
                'create-roadmap': path.resolve(__dirname, 'src/app/routes/create-roadmap')
            }
        },

        devtool: 'eval-source-map'
    })

    if (stage === 'build-javascript') {
        const config = getConfig()

        const miniCssExtractPlugin = config.plugins.find(
            plugin => (plugin.constructor.name === 'MiniCssExtractPlugin')
        )

        if (miniCssExtractPlugin) miniCssExtractPlugin.options.ignoreOrder = true

        actions.replaceWebpackConfig(config)
    }
}

【问题讨论】：

它是否也只发生在gatsby build 或gatsby develop 中？
gatsby build 和 gatsby develop 都存在此问题。
你运行的是什么版本的 Gatsby？
我刚从最新的 v2 迁移到最新的 v3 (3.4.0)。

标签： webpack gatsby css-modules mini-css-extract-plugin

【解决方案1】：

你试过了吗：

const path = require('path')

module.exports.onCreateWebpackConfig = ({
    stage,
    actions,
    getConfig
}) => {
    actions.setWebpackConfig({
        resolve: {
            modules: ['node_modules', path.resolve(__dirname, 'src')],
            alias: {
                'basic-info': path.resolve(__dirname, 'src/app/routes/basic-info'),
                'situation-analysis': path.resolve(__dirname, 'src/app/routes/situation-analysis'),
                'select-drivers': path.resolve(__dirname, 'src/app/routes/select-drivers'),
                'define-vision': path.resolve(__dirname, 'src/app/routes/define-vision'),
                'rate-drivers': path.resolve(__dirname, 'src/app/routes/rate-drivers'),
                'affinity-groups': path.resolve(__dirname, 'src/app/routes/affinity-groups'),
                'define-objectives': path.resolve(__dirname, 'src/app/routes/define-objectives'),
                'create-roadmap': path.resolve(__dirname, 'src/app/routes/create-roadmap')
            }
        },

        devtool: 'eval-source-map'
    })

    if (stage === 'build-javascript' || stage === 'develop') {
        const config = getConfig()

        const miniCssExtractPlugin = config.plugins.find(
            plugin => (plugin.constructor.name === 'MiniCssExtractPlugin')
        )

        if (miniCssExtractPlugin) miniCssExtractPlugin.options.ignoreOrder = true

        actions.replaceWebpackConfig(config)
    }
}

【讨论】：