Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks [英] Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks

问题描述

我有以下示例配置，可以在 Webpack 4 中使用 mini-css-extract-plugin:

条目:{a: ['./js/a.js', './scss/a.scss'],b: ['./js/b.js', './scss/b.scss']},模块: {规则: [[...]，{测试:/\.(css|sass|scss)$/,用: [MiniCssExtractPlugin.loader,{加载器:'css-加载器'，选项: {进口装载机:2，源地图:真实}},{loader: 'postcss-loader',选项: {插件:() =>[要求('自动前缀')],源地图:真实}},{loader: 'sass-loader',选项: {源地图:真实}}]},优化: {splitChunks:{缓存组:{js:{测试:/\.js$/,名称:公共"，块:全部"，minChunks: 7,},css:{测试:/\.(css|sass|scss)$/,名称:公共"，块:全部"，minChunks: 2,}}}},插件: [新的 MiniCssExtractPlugin({文件名: "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 模块的公共包.

解决方案

我正在我的 Webpack 4 配置中做这样的事情.

const MiniCssExtractPlugin = require("mini-css-extract-plugin")模块: {规则: [ {测试:/\.scss$/,用: [MiniCssExtractPlugin.loader,{加载器:css-加载器"，选项: {模块:真实，源地图:真实，进口装载机:2}},sass加载器"]}]},插件: [新的 MiniCssExtractPlugin({//类似于 webpackOptions.output 中相同选项的选项//这两个选项都是可选的文件名:style.css"，块文件名:[名称].css"]

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

输出:{文件名:[名称]-min.js"，路径:path.resolve(__dirname, "dist"),publicPath: "/static/react/dist/"},

<块引用>

编辑如果您对代码拆分感兴趣，Webpack 4 可以为您开箱即用".如果您使用动态导入，这将为您拆分 .js 和 .css 文件.

优化:{splitChunks:{块:'全部'}}

如果您只想将 .css 合并到一个文件中，您可以按如下方式添加.

优化:{splitChunks:{块:'全部'缓存组:{样式:{name: '样式',测试:/\.s?css$/,块:'全部'，minChunks: 1,重用ExistingChunk:真，强制执行:真实，},}},}

I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:

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",
    }),
]

And the following sass files:

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

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

When I run webpack libB.css is inserted in in commons.css bundle while libA.scss not.

In general every import of .css file get processed by splitChunks option (only if extension css is specified in the name) while sass import not.

I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.

解决方案

im doing someting like this in my Webpack 4 configuration.

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"
]

I also give "output.publicPath" -configuration object to point into my build dir, example ->

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

edit If you are interested in code splitting, Webpack 4 can do this "out of the box" for you. This will split .js and as well .css -files for you in case you use dynamic imports.

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

If you other hand would like to merge only your .css into one file you could add as follow.

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

这篇关于Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！