Entry & Output
모듈이 의존성 그래프를 만들고 번들 파일을 만든다.
Entry : 모듈의 의존 관계를 이해하기 위한 시작점을 설정
Output : webpack이 생성하는 번들 파일에 대한 정보를 설정
예 1
// $ npm init -y
// $ npm install webpack webpack-cli --save-dev
// $ npx webpack
// 에러남
// 새폴더 만들기 dist, src(index.js, log.js, mathUtil.js)
// $ npx webpack
// 또 에러남
// npx webpack --target=node
// $ node ./dist/main.js
// dist에 main.js가 잘 생성되었나 확인예 2
// 예 1과는 다른 방식
// webpack.config.js 파일 생성
const path = require('path');
module.exports = {
entry : './src/index.js,
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'bundle.js'
},
target : 'node'
}
// pathTest.js 파일 생성
const path = require('path');
console.log(__dirname);
const pathTest = path.resolve(__dirname, 'abc');
console.log(pathTest);
// $ node ./pathTest.js
// 경로가 잘 나타나면
// $ npx webpack설정 요소 1 Mode
- package.json --save-dev, --save
- 어플리케이션 내부에 직접 포함되는 모듈 예)jquery
→ dependencies : --save - 개발 과정에 필요한 모듈
→ devDependencies : --save-dev
- 어플리케이션 내부에 직접 포함되는 모듈 예)jquery
- 개발환경과 프로덕션 환경
- Mode & Webpack-merge
설정 요소 2 Loader
웹팩이 의존성 그래프를 만드는 과정에서 다양한 모듈들을 입력받아 처리하는 역할
module.exports = {
module : {
rlues : [ loader1, loader2 ]
}
}// 새로운 webpack 폴더 만들어서 vscode에 열기
// $ npm init -y
// $ npm install webpack webpack-cli --save-dev
// index.html, index.js 파일 생성
// index.html
<body><script src="./dist/bundle.js"></script></body>
// index.js
function component(){
const el=document.createElement('div');
el.innerHTML="Hello Webpack";
return el;
}
document.body.appendChild(component());
// webpack.config.js 파일 생성
const path = require('path');
module.exports = {
extry : './index.js',
output : {
filename: 'bundle.js',
path : path.resolve(__dirname, 'dist')
},
mode : 'none'
}
// package.json
"script" {
"build" : "webpack"
}
// $ npm run build
// index.html에 Hello Webpack 잘 나오는지 확인
// $ npm install style-loader css-loader --save-dev
// webpack.config.js
const path = require('path');
module.exports = {
extry : './index.js',
output : {
filename: 'bundle.js',
path : path.resolve(__dirname, 'dist')
},
modules : {
rules : [
{
test : /\.css$/i,
use : [
'style-loader',
{
loader : 'css-loader'
}
]
}
]
},
mode : 'none'
}
// $ npm install normalize.css --save
// index.js
import 'normalize.css';
function component(){
const el=document.createElement('div');
el.innerHTML="Hello Webpack";
return el;
}
document.body.appendChild(component());
// index.css 파일 생성
div {
color : red;
}
// index.js
import 'normalize.css';
import './index.css';
function component(){
const el=document.createElement('div');
el.innerHTML="Hello Webpack";
return el;
}
document.body.appendChild(component());
// npm run build
// 구글에서 css-loader 검색
// webpack-contrib/css-loader:CSS Loader-GitHub
// webpack.config.js
const path = require('path');
module.exports = {
extry : './index.js',
output : {
filename: 'bundle.js',
path : path.resolve(__dirname, 'dist')
},
modules : {
rules : [
{
test : /\.css$/i,
use : [
'style-loader',
{
loader : 'css-loader',
options : {
modules : true
}
}
]
}
]
},
mode : 'none'
}
// index.css
div {
color : red;
}
.helloWebpack {
color: blue;
}
// index.js
import 'normalize.css';
// import './index.css';
import styles from './index.css';
el.innerHTML
console.log(styles);
el.classList = styles.helloWebpack;
return;
function component(){
const el=document.createElement('div');
el.innerHTML="Hello Webpack";
return el;
}
document.body.appendChild(component());
// npm run build
// webpack.config.js
const path = require('path');
module.exports = {
extry : './index.js',
output : {
filename: 'bundle.js',
path : path.resolve(__dirname, 'dist')
},
modules : {
rules : [
{
test : /\.css$/i,
use : [
{
loader : 'style-loader',
options : {
injectType : 'singletonStyleTag'
}
},
loader : 'css-loader',
options : {
modules : true
}
}
]
}
]
},
mode : 'none'
}
// $ npm run build
// index.html <style> 태그가 두개로 나눠진게 하나로만 보이는지 확인설정 요소 3 Plugin
module.exports = {
plugins : [ new Plugin({...option}),...]
}// npm i html-webpack-plugin -D
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
extry : './index.js',
output : {
filename: 'bundle.js',
path : path.resolve(__dirname, 'dist')
},
modules : {
rules : [
{
test : /\.css$/i,
use : [
{
loader : 'style-loader',
options : {
injectType : 'singletonStyleTag'
}
},
loader : 'css-loader',
options : {
modules : true
}
}
]
}
]
},
plugins : [
new HtmlWebpackPlugin({
template : './template.html'
})
],
mode : 'none'
}
// index.html을 template.html로 변경하고 script 다 삭제
// $ npm run build
// dist 폴더에 index.html이 생성되었는지 확인