网页包4：迷你css提取插件+；sass装载机&x2B；分割块

我有以下示例配置，可以在Webpack 4中使用mini css extract插件：

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
            }
        }
    }
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "dist/[name].css",
    }),
]

以及以下sass文件：

// a.scss
@import 'libA.scss';
@import 'libB.css';
[...] 

// b.scss
@import 'libA.scss';
@import 'libB.css';
[...]

当我运行webpack时，

libB.css

被插入到

commons.css

bundle中，而

libA.scss

没有

通常，

.css

文件的每次导入都会通过splitChunks选项进行处理（仅当名称中指定了扩展名

css

时），而sass导入则不会

---

我有一个具有多个sass入口点和许多sass组件@import的项目，我想创建一个带有共享sass模块的公共包。

我在Webpack 4配置中做了类似的事情

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module: {
rules: [ {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          sourceMap: true,
          importLoader: 2
        }
      },
      "sass-loader"
    ]}
  ]
},

plugins: [
   new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: "style.css",
  chunkFilename: "[name].css"
]

我还提供了“output.publicPath”-配置对象以指向我的构建目录，例如->

output: {
   filename: "[name]-min.js",
   path: path.resolve(__dirname, "dist"),
   publicPath: "/static/react/dist/"
},

编辑如果您对代码拆分感兴趣，Webpack 4可以为您提供“开箱即用”的功能。这将为您拆分

.js

和

.css

-文件，以防您使用动态导入

另一方面，如果您只想将

.css

合并到一个文件中，您可以添加如下内容

optimization: {
    splitChunks: {
      chunks: 'all'
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      }
    },
}

---

我从未使用过mini css extract插件，但我使用过ExtractTextPlugin for css，有一件事可能会帮助您将加载程序放在一起，以便处理css。ExtractTextPlugin.extract（['css-loader'，'sass-loader']）可能是解决您的问题的好方法。我认为迷你css extract插件没有方法调用“extract”。在文档中，加载程序都是在同一个数组中编写的，就像我的示例一样（

MiniCssExtractPlugin.loader

然后

css loader

，等等）。我不确定这是否是一个类似的问题，但这篇文章对我帮助很大——基本上就是使用@next版本（我的其他设置与你的类似）使用此配置，webpack将把所有css合并到一个中，但也将生成

styles.js

，这是使一切正常工作所必需的（所有捆绑的js）。有什么方法可以删除该文件吗？如果预期的解析文件是

/md/\u variables.scss

，则该方法是否处理

@import'md/variables'

？错误的api架构。cacheGroups位于SplitChunk内部。@nass600仅使用

webpack修复样式条目

webpack插件，工作正常。

importLoader

应该是

importLoaders

，在初始配置示例中可能应该是1而不是2

optimization: {
    splitChunks: {
      chunks: 'all'
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      }
    },
}