티스토리 뷰
프론트앤드에서는 /src, /dist, /build
동일한 내용들이 JavaScript 모듈에 사용되었지만
webpack과 같은 도구는 모든 종속성 을 동적 번들로 묶습니다.
또한 웹팩은 자바 스크립트 로더가 있는 다른 유형의 파일도 포함할 수 있습니다.
그냥.. 부가적인 파일(이미지 등등)들은 하나로 다 묶는다고 쉽게 생각하면됨
dist / index.html
<!doctype html>
<html>
<head>
- <title>Getting Started</title>
+ <title>Asset Management</title>
</head>
<body>
- <script src="main.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
- filename: 'main.js',
+ filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
이전과 비슷하게 bundle.js 스크립트로 경로 찍어주고. config에는 이름을 넣어주면됨
다 되었다면 빌드~
CSS 로딩
자바 스크립트 모듈 내에서 CSS파일과 스타일로더 설치
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ ],
+ },
+ ],
+ },
};test: /\.css$/,
정규식으로 .css로 끝나는 파일을 모두 찾는 부분입니다.
이제 작성한 모듈이 실행될 때 이를 통해 import './style.css'스타일 파일을 사용할 수 있습니다.
style.css 새 파일을 추가하고 파일을 가져 와서 사용해봅시다.
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+|- style.css
|- index.js
|- /node_modules
src / style.css
.hello {
color: red;
}
src / index.js
import _ from 'lodash';
+ import './style.css';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.classList.add('hello');
return element;
}
document.body.appendChild(component());
파일 생성 다 하고 코드를 다 적었다면 바로 빌드 ㄱㄱ
npm run build
이미지 로딩
파일 로더를 사용하여 시스템에 파일 로더 를 쉽게 통합 할 수 있습니다.
npm install --save-dev file-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader',
+ ],
+ },
],
},
};css-loader를 사용하면 CSSurl('./my-image.png') 내에서도 비슷한 프로세스가 됩니다.
로더는이 파일이 로컬 파일임을 인식하고'./my-image.png'경로를 output디렉토리 의 이미지에 대한 최종 경로로 바꿉니다.
HTML 로더 핸들 <img src="./my-image.png" /> 동일합니다.
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+|- icon.png
|- style.css
|- index.js
|- /node_modules
이미지 파일 하나 만드시고~
import _ from 'lodash';
import './style.css';
+ import Icon from './icon.png';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
+ // Add the image to our existing div.
+ const myIcon = new Image();
+ myIcon.src = Icon;
+
+ element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());src / style.css
.hello {
color: red;
+ background: url('./icon.png');
}다됐으면 빌드 ㄱㄱ
npm run build
폰트 로딩
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader',
+ ],
+ },
],
},
};
폰트파일 추가..
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+|- my-font.woff
+|- my-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules
src / style.css
+ @font-face {
+ font-family: 'MyFont';
+ src: url('./my-font.woff2') format('woff2'),
+ url('./my-font.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ }
.hello {
color: red;
+ font-family: 'MyFont';
background: url('./icon.png');
}다됐으면 빌드 ㄱㄱ npm run build
데이터 로딩
npm install --save-dev csv-loader xml-loader
JSON 파일, CSV, TSV 및 XML과 같은 데이터입니다.
JSON에 대한 지원은 실제로 NodeJS와 유사하게 import Data from './data.json'기본 제공됩니다.
CSV, TSV 및 XML을 가져 오려면 csv-loader 및 xml-loader를 사용
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader',
+ ],
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader',
+ ],
+ },
],
},
};
파일추가
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+|- data.xml
|- my-font.woff
|- my-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules
src / data.xml
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Mary</to> <from>John</from> <heading>Reminder</heading> <body>Call Cindy on Tuesday</body> </note>
이제 import네 가지 유형의 데이터 (JSON, CSV, TSV, XML) 중 하나 Data를 가져올 수 있으며,
져올 변수에는 쉽게 사용할 수 있도록 구문 분석 된 JSON이 포함됩니다.
src / index.js
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
+ import Data from './data.xml';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// Add the image to our existing div.
const myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
+ console.log(Data);
return element;
}
document.body.appendChild(component());
빌드 ㄱㄱ
npm run build
'[웹] > WebPack' 카테고리의 다른 글
| [WebPack] 코드분할 방법 (0) | 2019.11.29 |
|---|---|
| [WebPack] webpack-dev-server 서버 구축 (Step5) (0) | 2019.11.27 |
| [WebPack] HtmlWebpackPlugin (Step4) (0) | 2019.11.27 |
| [WebPack] 시작하기 (Step2) (0) | 2019.11.27 |
| [WebPack] 시작하기 (Step1) (0) | 2019.11.27 |
- Total
- Today
- Yesterday