이전 내용을 확인하고 싶으시다면, 아래 링크를 눌러주세요.
1. Webpack이란 무엇인가?
이전부터 Front-end 개발 업무를 할 때 코드를 수정하고 저장한 뒤 브라우저를 새로고침해서 확인하거나, 웹 서버에 배포할 때 HTML, CSS, JS 및 이미지 압축, CSS 전처리기 반환 등의 작업을 해야 했다.
conative.tistory.com
Webpack이 뭔지 대충 알았으니, 이제 본격적으로 Webpack을 적용해 보겠다.
$ mkdir webpack_test
$ cd webpack_test
$ npm init -y
$ npm i webpack webpack-cli css-loader style-loader mini-css-extract-plugin -D아래 파일들은, 루트 경로에 작성한다.
Index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack~!</title>
</head>
<body>
<p>
파란 글씨가 보이십니까?
</p>
<script src="./dist/bundle.js"></script>
</body>
</html>main.css
/* main.css */
p {
color : blue;
}index.js
// index.js
import './main.css';webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'none',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}package.json (수정)
// package.json
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack", // 해당 구문 추가!
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.6.1",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}
$ npm run build
> code-splitting@1.0.0 build
> webpack
asset bundle.js 17 KiB [compared for emit] (name: main)
runtime modules 972 bytes 5 modules
cacheable modules 9.64 KiB
modules by path ./node_modules/ 8.07 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.44 KiB [built] [code generated]
./node_modules/style-loader/dist/runtime/styleDomAPI.js 1.38 KiB [built] [code generated]
./node_modules/style-loader/dist/runtime/insertBySelector.js 1010 bytes [built] [code generated]
+ 3 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
modules by path ./*.css 1.54 KiB
./main.css 1.1 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./main.css 451 bytes [built] [code generated]
./index.js 20 bytes [built] [code generated]
webpack 5.73.0 compiled successfully in 373 ms라이브 서버로 돌려보면...
webpack.config.js 뜯어보기
const path = require('path');
module.exports = {
mode: 'production', // 난독화(min)
entry: './js/app.js', // 빌드 대상 파일
output: { // 빌드 후 (웹팩 변환 후) 나올 결과물
path: path.resolve(__dirname, 'build'),
filename: 'main.bundle.js'
},
module: { // Entry -> Output으로 변환할 때 개입하는 속성
rules: [{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
},
stats: {
colors: true
},
devtool: 'source-map' // 빌드 결과물 연결해주는 기능
};1. entry
Webpack에서 웹 서비스에 대한 자원을 변환하기 위한 첫 시작점(진입점) 파일을 의미한다.
2. output
Webpack 번들링 이후 결과물을 저장할 경로를 의미한다.
module.exports = {
output: {
path: './dist',
filename: 'bundle.js',
// filename: '[id].bundle.js',
}
}
/**
* Filename에는 여러 속성을 넣을 수 있다.
* id: 모듈 ID 포함
* name: entry 속성 포함
* hash: 고유 해시 값 포함
* chunkhash: Webpack 각 모듈 내용 기준으로 생성된 해시 값 포함
*/3. loader(module)
Webpack이 Web application을 해석할 때 JS가 아닌 파일 - 웹 자원(HTML/CSS/Images/Fonts)들을 변환할 수 있도록 도와주는 속성
module.exports = {
module: {
rules: [{
...
},{
...
}]
}
}
