Reference : 캡틴판교님 강의, 웹팩 핸드북
실습
package.json
{
"name": "code-splitting",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.2",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.1.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
아래 명령어로 실습에 필요한 라이브러리 설치함
npm i webpack webpack-cli css-loader style-loader mini-css-extract-plugin -D
프로젝트 루트 레벨에 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS & Libraries Code Splitting</title>
</head>
<body>
<header>
<h3>CSS Code Splitting</h3>
</header>
<div>
<!-- 웹팩 빌드 결과물이 잘 로딩되면 아래 p 태그의 텍스트 색깔이 파란색으로 표시됨 -->
<p>
This text should be colored with blue after injecting CSS bundle
</p>
</div>
<!-- 웹팩의 빌드 결과물을 로딩하는 스크립트 -->
<script src="./dist/bundle.js"></script>
</body>
</html>
프로젝트 루트 레벨에 base.css 파일 생성 후 아래 내용 추가
p {
color: blue;
}
프로젝트 루트 폴더에서 index.js 파일 생성 후 아래 내용 추가
import './base.css';
프로젝트 루트 레벨에 웹팩 설정 파일 webpack.config.js 추가
var path = require('path');
module.exports = {
mode: 'none', // production(배포시 production으로), development, none
entry: './index.js', // 웹팩으로 변환할 파일
output: {
filename: 'bundle.js', //
path: path.resolve(__dirname, 'dist')
},
// module = loader
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
]
},
}
npm run build ---> webpack으로 index.js 를 돌렸을 때, 만들어진 dist 폴더의 bundle.js에서 base.css의 코드가 로더에 의해 자바스크립트 코드 안으로 들어감
만약 webpack.config.js의 module부분을 주석처리하면?
css파일을 불러오다가 오류가 나면서 적절한 로더를 추가해라~ 라고 뜸
그럼 webpack.config.js에 css-loader만 추가하면?
오류는 안난다. 근데 index.html을 실행하면 파란색으로 글씨가 보이게 하는 style 태그가 적용이 안되어있음
이번엔 css-loader, style-loader 순서대로 적용했더니 오류가 난다. 로더의 순서를 잘 지켜줘야 한다는 것을 알 수 있다.
plugin 적용하기
// webpack.config.js
var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "none", // production(배포할 때 production으로 써줘야한다!), development, none
entry: "./index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
},
],
},
plugins: [new MiniCssExtractPlugin()],
};
style-loader가 빠지고 plugin loader가 들어가면서 main.css라는 파일이 dist폴더 안에 생성되었음.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS & Libraries Code Splitting</title>
// link태그를 추가해서 main.css파일을 읽을 수 있도록 해준다
<link rel="stylesheet" href="./dist/main.css" />
</head>
<body>
<header>
<h3>CSS Code Splitting</h3>
</header>
<div>
<!-- 웹팩 빌드 결과물이 잘 로딩되면 아래 p 태그의 텍스트 색깔이 파란색으로 표시됨 -->
<p>This text should be colored with blue after injecting CSS bundle</p>
</div>
<!-- 웹팩의 빌드 결과물을 로딩하는 스크립트 -->
<script src="./dist/bundle.js"></script>
</body>
</html>
# 요약
css-loader: css가 웹팩 안으로 들어갈 수 있게 하는 역할
style-loader: 웹팩 안의 스타일 코드를 헤드 안에 인라인 스타일로 넣어주는 역할
순서는 항상 오른쪽에서 왼쪽순서로 적용
plugin은 결과물에 대한 정보를 변형해서 우리에게 제공한다
Entry 속성은 웹팩을 실행할 대상 파일. 진입점이다.
Output 속성은 결과물에 대한 정보를 입력하는 속성이다. 일반적으로 filename 과 path 정의
Loader 속성은 CSS, images 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성. 로더는 오른쪽에서 왼쪽으로 적용
Plugin 속성은 웹팩으로 변환한 파일에 추가적 기능을 더하고플때 사용하는 속성. 웹팩 변환 과정 전반에 대한 제어권을 갖는다
로더 필요할 땐 https://webpack.js.org/loaders/ 에서 찾아서 쓰는 법 공부해서 적용해보자
플러그인은 https://webpack.js.org/plugins/
'공부 정리' 카테고리의 다른 글
| 22.11.28: git commit message (0) | 2022.11.28 |
|---|---|
| 22.11.27 : CRA없이 프로젝트 생성하기-5 (webpack dev server, webpack.config.js 살펴보기) (0) | 2022.11.27 |
| 22.11.26 : CRA없이 프로젝트 생성하기-3 (웹팩 설정, 주요 속성) (0) | 2022.11.26 |
| 22.11.25: URI, URL (0) | 2022.11.25 |
| 22.11.24 : HTML 기본 구조, HTML5 시맨틱태그 (0) | 2022.11.24 |
