0에서 Webpack
6903 단어 webpack
왜 Webpack 사용
개발을 진행하고 있으면 파일이 늘어나는 늘어나간다. .
종속성 등을 파악할 수 없게되어 고생하는 것에
webpack은 여러 파일을 하나로 정리해 주므로 참조처가 깔끔합니다.
파일 구조
project
├── webpack.config.js
├── dist
│ └── bundle.js
├── index.html
├── node_modules
├── package.json
└── src
├── app.js
└── index.js
Installation
terminal$ npm init -y
$ npm install webpack webpack-cli webpack-dev-server
준비
정리하고 싶은 JS 파일을 준비
app.js가 index.js를 읽고 문자열을 표시하는 코드
app.jsconst hello = require("./index")
console.log(hello)
index.jsconst mess = "Hello Webpack!"
module.exports = mess
명령 설명
project
├── webpack.config.js
├── dist
│ └── bundle.js
├── index.html
├── node_modules
├── package.json
└── src
├── app.js
└── index.js
Installation
terminal$ npm init -y
$ npm install webpack webpack-cli webpack-dev-server
준비
정리하고 싶은 JS 파일을 준비
app.js가 index.js를 읽고 문자열을 표시하는 코드
app.jsconst hello = require("./index")
console.log(hello)
index.jsconst mess = "Hello Webpack!"
module.exports = mess
명령 설명
$ npm init -y
$ npm install webpack webpack-cli webpack-dev-server
정리하고 싶은 JS 파일을 준비
app.js가 index.js를 읽고 문자열을 표시하는 코드
app.js
const hello = require("./index")
console.log(hello)
index.js
const mess = "Hello Webpack!"
module.exports = mess
명령 설명
package.json
{
"name": "Webpack_0",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"webpack": "^4.41.2",
"webpack-cli": "3.3.11",
"webpack-dev-server": "^3.9.0"
}
}
build 는 정리해 주는 것
start 는 localhost 를 기동하는 것 (나중에 제대로 움직이고 있는지 확인하는 용)
HTML 준비
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
webpack 구성 파일
webpack.config.js
const path = require('path')
module.exports = {
mode : 'development', //これをつけないとwarningが出る。なくても問題はない。
entry : './src/app.js', //まとめたいファイルの親を指定
output : {
filename : 'bundle.js',
path : path.join(__dirname, 'dist') // dist/bundle.js って感じに吐き出される
},
devServer: {
port : 4040, //localhostのポート指定
open : true //startコマンドを叩いた後、自動的に訪問するかどうかの設定
}
};
실제로 두드려 보자
terminal$ npm run build
> webpack_0@ build /Webpack_0
> webpack
Version: webpack 4.41.2
Time: 84ms
Built at: ******
Asset Size Chunks Chunk Names
bundle.js 1000 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/app.js 55 bytes {0} [built]
[1] ./src/index.js 50 bytes {0} [built]
이런 느낌이 나오면 OK
ls 로 확인하면 dist 가 내뿜고 있다고 생각합니다.
로컬 서버를 실행하고 확인
terminal$ npm run start
를 두드리면 localhost:4040이 자동으로 열립니다.
콘솔을 확인해 보면,
괜찮을 것 같습니다.
끝
이번에 사용한 코드는 여기
Reference
이 문제에 관하여(0에서 Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Taiga_san/items/232b95b1f8de1eb2a5d9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npm run build
> webpack_0@ build /Webpack_0
> webpack
Version: webpack 4.41.2
Time: 84ms
Built at: ******
Asset Size Chunks Chunk Names
bundle.js 1000 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/app.js 55 bytes {0} [built]
[1] ./src/index.js 50 bytes {0} [built]
terminal
$ npm run start
를 두드리면 localhost:4040이 자동으로 열립니다.
콘솔을 확인해 보면,
괜찮을 것 같습니다.
끝
이번에 사용한 코드는 여기
Reference
이 문제에 관하여(0에서 Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Taiga_san/items/232b95b1f8de1eb2a5d9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(0에서 Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Taiga_san/items/232b95b1f8de1eb2a5d9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
