ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
main의 css가 커짐에 따라 작은 용량으로 나누기 위해 mini-css-extract-plugin을 사용하려고 하였습니다. 번들링 된 파일 중 css 파일을 모듈화 시켜주는 로더가 없어서 발생한 이슈였습니다.
[AS-IS]
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/app.js",
},
output: {
filename: "[name].js",
path: path.resolve("./dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader],
},
{
test: /\.(png|jpg|svg|gif)$/,
loader: "url-loader",
options: {
name: "[name].[ext]?[hash]",
limit: 10000, // 10Kb
},
},
],
},
plugins: [new MiniCssExtractPlugin({ filename: `[name].css` })],
[TO-BE]
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/app.js",
},
output: {
filename: "[name].js",
path: path.resolve("./dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(png|jpg|svg|gif)$/,
loader: "url-loader",
options: {
name: "[name].[ext]?[hash]",
limit: 10000, // 10Kb
},
},
],
},
plugins: [new MiniCssExtractPlugin({ filename: `[name].css` })],
MiniCssExtractPlugin.loader
는 css를 모듈로 변환시켜주는 기능은 없습니다.
MiniCssExtractPlugin.loader
는 split된 css 모듈을 돔에 추가해 주는 역할만 하기 때문에 css를 모듈로 변환 시켜주는 로더가 없어서 발생한 이슈였습니다.
그래서 css를 모듈로 변환해 줄 수 있는 css-loader를 추가해 줘서 해결했습니다.
추가로 MiniCssExtractPlugin.loader
와 같이 css 모듈을 돔에 추가해 주는 style-loader
이라는 로더가 있습니다. 이 둘은 같은 역할을 하기 때문에 하나만 사용하여야 합니다.
각 로더의 특징들이 있는데 이 부분은 다른 포스트에서 자세히 다뤄보겠습니다.
https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/extract-css-files