Intro.
웹팩이 JS , JSON파일들을 번들링해줌으로써, 상당히 많은 문제들이 해결됬습니다. 다만, 이왕 번들링한거 CSS도 같이 번들링 했으면 좋겠습니다. 다만, 웹팩은 기본적으로 JS,JSON밖에 번들링 할 줄 모르기에, 추가적인 셋팅을 해주어야합니다.
Goal
/* Before */
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack Studies</title>
<link rel="stylesheet" href="./src/css/index1.css" />
<link rel="stylesheet" href="./src/css/index2.css" />
<link rel="stylesheet" href="./src/css/index3.css" />
<link rel="stylesheet" href="./src/css/index4.css" />
<link rel="stylesheet" href="./src/css/index5.css" />
</head>
/* After */
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack Studies</title>
</head>
Method
1. JS 파일에, CSS파일을 import 합니다.
// [entryfile].js
import '../css/index.css';
...
2. 웹팩에 CSS파일 관련 loader를 받습니다.(style-loader , css-loader)
yarn add -D style-loader css-loader
css-loader는 웹팩에 CSS파일을 디스크로부터 읽는 법을,
style-loader는 웹팩에 css style들을 DOM에 주입하는 법을 알려줍니다.
3. 웹팩 config파일에 앞서 다운받은 모듈들을 loader로써, 설정합니다.
const common = require('./webpack.common.config');
const { merge } = require('webpack-merge');
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
// !! 뒤에 순서부터 적용되므로 반드시 위 순서에 맞게 배치해야함
}
]
}
});'Bundler' 카테고리의 다른 글
| [Webpack] 빌드 시 하위 경로 생성하기 (0) | 2023.04.24 |
|---|---|
| [Webpack] 동적으로 HTML 생성하기 (HTMLWebpackPlugin) (0) | 2023.04.24 |
| [Webpack] CSS 파일 메인 번들과 분리시키기 (MiniCssExtractPlugin) (0) | 2023.04.24 |
| [Webpack] 기초적인 개발용 환경 구성하기 (0) | 2023.04.23 |
| [Webpack] Intro. (0) | 2023.04.20 |
