Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks Webpack 4：使用mini-css-extract-plugin、sass-loader和splitChunks插件

Question

Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks Webpack 4：使用mini-css-extract-plugin、sass-loader和splitChunks插件

31

我有以下示例配置可用于Webpack 4中使用mini-css-extract-plugin：

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包中，而libA.scss没有。

一般来说，每个.css文件的导入都会通过splitChunks选项进行处理（仅在名称中指定了扩展名css时），而sass导入则不会。

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

- Andrea Moraglia

我从未使用过mini-css-extract-plugin，但我曾经使用过ExtractTextPlugin来处理css，一个可能有帮助的方法是将加载器放在一起以处理你的css。ExtractTextPlugin.extract(['css-loader', 'sass-loader'])这可能是解决你问题的一个好主意。 - Italo Borges

我认为mini-css-extract-plug没有方法调用“extract”。在文档中，加载器都写在同一个数组中，就像我的示例一样（MiniCssExtractPlugin.loader然后是css-loader等等...）。 - Andrea Moraglia

我不确定是否存在类似的问题，但这篇帖子对我帮助很大 - 基本上只是使用@next版本（我的其余设置与您的类似）https://dev59.com/91UL5IYBdhLWcg3wI1Ap - Sia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jimi Pajala · Accepted Answer

我在我的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.publicPath配置对象设置为指向我的构建目录，例如 ->

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

编辑如果你对代码分割感兴趣，Webpack 4可以为你实现这一点。如果你使用动态导入，它将自动为你拆分.js和.css文件。

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

如果你只想将你的 .css 合并成一个文件，你可以添加以下内容。

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