标签: webpack-config

在webpack.config.js确定模块中，我们可以使用 3 个不同的属性：

...
module:{
    rules: [
        {
            test: ... // the first one, commonly used in most example we can found on internet
            include: ... // the second one
            resource: ... // the third one
            use: ['style-loader','css-loader'],
        },
        ...
    ],  
    ...
}

文档没有解释它们：

Rule.test
包括所有通过测试断言的模块。如果您提供一个Rule.test选项，则不能同时提供Rule.resource. 详情请参阅Rule.resource和Condition.test

Rule.include
包含与任何这些条件匹配的所有模块。如果您提供一个Rule.include选项，则不能同时提供Rule.resource. 详情请参阅Rule.resource和Condition.include

Rule.resource
ACondition与资源匹配。详情请参阅Rule条件。

他们每个人都是Condition类型。其中一些是相互排斥的。但每个的目的是什么？我们什么时候应该使用每一个？

只要有，test一切就都清楚了。

所以今天我一直在尝试将 postscss-loader 从 3.0.0 版本迁移到 4.0.2

我注意到从 4.0.0 版开始，他们添加了 postCSS 作为对等依赖项，所以我添加了 postcss 7.0.27 版。我没有选择 8，因为我也使用了“postcss-import”，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在在运行时，我收到了所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于消息不是真正的描述性，解决问题已成为一种真正的试错方法。到目前为止没有成功。

这是我的 webpack.config.ts：

import postCSSImport from 'postcss-import';
import autoPrefixerFlexbox from 'postcss-flexbugs-fixes';
import autoPrefixer from 'autoprefixer';

const BrowserList = {
    mobile: ['android >= 4', 'ios >= 8'],
    desktop: ['firefox >= 40', 'chrome >= 49', 'edge >= 12', 'opera >= 47', 'ie >= 11', 'safari >= 9'],
    designer: ['firefox >= …