1. 모듈 사용 방법
- 아래의 작업을 진행하면, index.html에서 link태그를 이용해 설정해놓은 css 연결부분을 삭제해야한다.
a) main.js 파일을 이용한 CSS 파일 연결
- 이전 포스팅에서 static 폴더에 생성하면 static부분의 경로를 생략하고 dist에서 읽어드릴 경로로 작성했다.
- 이번에는 static 폴더를 사용하지 않고 main.js 파일을 이용하여 파일을 연동하는 방법을 배울 것이다.
- 먼저, 루트 경로에 css 폴더를 만들고 그 안에 main.css라는 파일을 만들자.
- main.css 에는 body 태그의 배경색을 변경하는 내용을 적었다.
- 그리고 main.js 파일에서 main.css 파일을 import 해준다.
- webpack.config.js 파일 안에서 entry 지점을 main.js로 설정해 놓았기 때문에 main.css 파일을 읽을 수 있다.
- main.js 를 우선적으로 읽고 index.html 과 합쳐서 나중에 빌드를 할 때 dist 폴더안에 함께 저장되는 방식이다.
b) webpack 자체는 CSS 파일을 읽을 수 없다.
- webpack은 html과 CSS 파일을 합쳐줄 수 는 있어도 CSS 자체를 이해하는 능력이 없다.
- css-loader 와 style-loader 패키지 설치를 통해서 이를 해결할 수 있다.
- 터미널 입력: npm i -D css-loader style-loader
c) webpack.config.js 설정
- 이전에도 진행했던 것 처럼, 새로운 패키지를 설치했으니 명시해줘야 한다.
// import
const path = require('path') // node 모듈을 import 해오는 기본방법
const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기
const CopyPlugin = require('copy-webpack-plugin')
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js',
//결과물(번들)을 반환하는 설정
output: {
clean: true // 덮어쓰기 기능 속성
},
module: {
rules: [
{
test: /\.css$/, // .css 확장자를 갖는 파일을 찾는 정규표현식
use: [
'style-loader',
'css-loader'
]
}
]
},
// 번들링 후 결과물의 처리방식 등 다양한 플러그인 사용을 위한 구성요소 추가
plugins: [
new HtmlPlugin({ // 생성자를 이용한 플러그인 생성
template: './index.html' // 템플릿 연결
}),
new CopyPlugin ({
patterns: [
{ from: 'static' } // static 폴더 안의 내용이 dist로 복사되어 들어가도록 한다.
]
})
],
devServer: {
host:'localhost'
}
}
- module 라는 속성값 부분을 살펴보자.
- use에 방금 설치한 패키지를 명시하였는데, 패키지가 명시된 순서가 중요하다. 하나씩 알아보자.
d) css-loader
- style-loader와 css-loader 패키지 두개를 설치하였다. 이 중에서 먼저 해석되는 패키지는 css-loader이다.
- css-loader는 자바스크립트에서 import한 css 파일을 해석할 수 있도록 하는 기능을 갖는다.
- 위에서 진행한 과정을 보면, main.js 파일에서 css 파일을 import해서 읽도록 하고 있다.
- 자바스크립트에서는 원래 css 파일을 이해할 수 없기 때문에, css-loader 패키지 설치를 통해서 이를 가능하게 한 것이다.
e) style-loader
- css-loader를 통해 JS에서 css파일을 해석할 수 있게 되었다. 이제 해석한 css파일을 어떻게 사용할 것이냐가 관건이다.
- main.js 해석한 css 파일의 내용을 index.html의 style 태그에 삽입해야 하는데, 이를 style-loader가 수행하게 된다.
- webpack.config.js 파일에 style-loader가 먼저 명시된 후 css-loader를 명시해야 함을 잊지 말자.
f) 확인하기
- 터미널에 입력: npm run dev
- 로컬 경로로 들어가서 css가 잘 적용되었는지 확인하자.
'Front-end > Webpack' 카테고리의 다른 글
6. webpack - babel 설정 (0) | 2021.05.06 |
---|---|
5. webpack - vendor prefixer / auto-prefixer(Post CSS) (0) | 2021.05.06 |
4. webpack - SCSS 적용하기 (0) | 2021.05.06 |
2. webpack - index.html 연결하기 (0) | 2021.05.05 |
1. webpack 시작하기 (0) | 2021.05.04 |
댓글