728x90
개요)
실습1. webpack.config.js 파일을 생성해 webpack이 빌드할 때 커스텀 요소를 넣어보기
실습전 준비사항
1. node설치
2. webpack, webpack-cli 설치
npm install webpack webpack-cli --save-dev
실습1.
1. webpack.config.js 파일 생성
// can't use ecma script module. use only common.js
console.log("module >>> ", module);
const path = require('path');
// minimum option
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
mode: 'none'
}
entry: 묶기 시작할 시작점 파일
output.filename: 빌드 후 저장할 파일명
output.path: 빌드 후 저장할 디렉토리명
2. Script 파일 생성하기
//index.js
import helloWorld from './hello-world.js';
helloWorld();
// hello-world.js
function helloWorld() {
console.log("Hello World");
}
export default helloWorld;
index.js는 hell-world.js를 포함하고 있다.
표현하자면 아래와 같다.
index.js = {helloword.js}
그래서 entry에 index.js만 넣은 것이다.
index.js만 빌드하면
helloworld.js까지 함께 빌드된다.
3. webpack으로 빌드하기
npx webpack
4. index.html에 빌드한 bundle.js를 넣어 브라우저로 열어보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
복사 후
브라우저 주소에 넣기
잘 나온다.
'서버 > Webpack' 카테고리의 다른 글
| Webpack - vue, react처럼 component 직접 만들어보기 (3) | 2024.10.28 |
|---|---|
| Webpack - txt를 빌드할 때 넣어보기 (1) | 2024.10.28 |
| react (cra) - webpack 커스텀 react-app-rewired (pc, wv 분리) (1) | 2024.10.27 |
| Webpack - 간단하게 js파일 에서 이미지를 import 후 웹팩에서 파싱하기 (0) | 2024.10.25 |
| Webpack - 웹팩은 뭘 해주는 녀석일까 (간단한 실습을 통해 이해해보기) (0) | 2024.10.24 |
