CSS を別ファイルに切り出す
CSS を別ファイルに切り出す
webpack を使って静的なページを作成中、
CSS の読み込みが遅く CSS が最初効いていませんでした。
問題
bundle.js に CSS も含めて出力していたのが問題のようでした。
そこで、 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-plugin の
Usage を参考に 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 の読み込みが改善されました。
