web-dev-qa-db-ja.com

Webpack 4：mini-css-extract-plugin + sass-loader + splitChunks

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モジュールで共通のバンドルを作成したいと思います。

csswebpacksasssass-loaderwebpack-4
17
Andrea Moraglia

私の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ファイルが分割されます。

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

もう一方の手で.cssのみを1つのファイルにマージする場合は、次のように追加できます。

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