hene

hene.dev

CSS を別ファイルに切り出す

CSS を別ファイルに切り出す

webpack を使って静的なページを作成中、 CSS の読み込みが遅く CSS が最初効いていませんでした。

問題

bundle.jsCSS も含めて出力していたのが問題のようでした。 そこで、 CSS を別ファイルに切り出して読み込みを改善することにしました。

extract-text-webpack-plugin

いろいろ調べてみると、extract-text-webpack-plugin を使うと CSS を別ファイルに切り出せる事がわかりました。

README.md を見ると、

<!-- README.md -->

Usage

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

と書かれていたので、自分のプロジェクトの package.json を見て webpack のバージョンを確認します。

// package.json
{
  ...
  "devDependencies": {
    ...
    "webpack": "^4.28.4",
    ...
  }
}

webpack のバージョンが 4 以上だったので、 mini-css-extract-plugin を使うことにしました。

mini-css-extract-plugin

まず、mini-css-extract-plugin をインストールします。

$ npm i -D mini-css-extract-plugin

次に、mini-css-extract-pluginUsage を参考に webpack.config.js を以下のように変更。

// webpack.config.js

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

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: enabledSourceMap
            }
          }
        ]
      },
      {
        ...
      }
    ]
  },
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: "./css/[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

設定後、

$ npm run build

dist/css/main.js が出力されました。

結果

CSS の読み込みが改善されました。

参考

関連記事