입문 안내서 웹 패키지
들어오다웹 패키지!
출처:
Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
이게 무슨 뜻이죠?Node에 작은 자바스크립트 프로그램을 구축해서 Webpack의 실제 응용을 살펴봅시다.
웹 패키지 5 문서 설치 프로그램
npm로 새 프로젝트를 만들고 설치
webpack와webpack-cli.mkdir hello-webpack && cd hello-webpack
npm init -y
npm install --save-dev webpack webpack-cli
src 와 public 를 만듭니다.src 폴더는 처리되지 않은 원본 코드를 저장하고 Webpack이 public 폴더에서 전송된 코드를 출력하도록 지시합니다.webpack.config.js 라는 파일을 만들어야 합니다. 잠시 후에 자세히 설명하겠습니다.당신의 프로젝트는 다음과 같아야 합니다.hello-webpack/
├── src/
├── public/
├── webpack.config.js
└── package.json
소포.json
{
"name": "hello-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
공용 / 인덱스.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../src/game.js" defer></script>
<script src="../src/main.js" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Click Me</title>
</head>
<body>
<button id="button">Click Me!</button>
</body>
</html>
공공/패션.css
button {
height: 300px;
width: 300px;
font-size: 40px;
background-color: goldenrod;
color: white;
border-radius: 50%;
cursor: pointer;
}
src/게임.js
let numTimesClicked = 0;
function win() {
alert('You win!');
reset();
}
function reset() {
numTimesClicked = 0;
}
function click() {
numTimesClicked++;
console.log(`You've been clicked!`);
if (numTimesClicked === 10) win();
}
src/main。js
const button = document.getElementById('button');
button.addEventListener('click', function() {
click();
});
당신은 왜 웹 패키지가 필요합니까?
명령줄에서 실행
open public/index.html.너는 노란색 단추를 보아야 한다.이 단추를 눌렀을 때 메시지를 콘솔에 기록해야 합니다.만약 네가 이 버튼을 10번 눌렀다면, 경보가 울려 퍼져서, 네가 이겼다는 것을 알게 될 것이다.위대하다우리 망했어!농담입니다.너의
index.html 서류를 봐라.7행과 8행에 defer 키워드가 없으면 어떻게 됩니까?자바스크립트 파일을 다시 주문하면요?<!-- remove 'defer' from lines 7 and 8 -->
<!-- re-order 'game.js' and 'main.js' -->
<script src="../src/main.js"></script>
<script src="../src/game.js"></script>
읊다, 읊조리다내가 처음에 말한 스크립트를 순서대로 실행한 거 기억나?
defer 속성은 브라우저가 HTML 파일 로드가 완료될 때까지 특정 JavaScript 파일을 실행하지 않도록 합니다.없으면defer JavaScript는 HTML을 로드한 후 즉시 실행됩니다.만약 당신의 "main"의 코드가 있다면.js 파일은 게임 코드 앞에서 실행됩니다.js, "클릭 ()"함수를 정의하기 전에 프로그램에서 이 함수를 실행하려고 시도합니다.이것이 바로 왜 당신의 컨트롤러에 지금 오류가 있습니까?
모듈을 Webpack과 함께 번들
이제 Webpack이 왜 필요한지 알 수 있습니다. 실제 응용을 살펴봅시다.
Webpack은 모듈 바인딩입니다.프로그램의 의존 항목을 추적해서 프로그램을 처리한 다음 브라우저에서 실행할 수 있는 파일로 포장하는 것이 목적입니다.노드 응용 프로그램이 일반적으로
package.json에 설정된 것처럼 webpack.config.js 파일에서도 Webpack을 설정할 수 있습니다.웹 패키지.배치하다.js
Webpack은 엔트리 포인트, 출력 위치 및 loaders를 기반으로 합니다.입력과 출력에만 집중하지만, 더 큰 프로젝트를 위한 Webpack을 설정할 때, 다른 두 개를 사용할 것입니다.
플러그 인 항목: Webpack에서 작성을 시작한 JavaScript 파일입니다.
module.exports = {
entry: './path/to/my/entry/file.js'
};
출력: JavaScript의 이름과 경로를 바인딩합니다.
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js', // the starting point for our program
output: {
path: path.resolve(__dirname, 'directory_name'), // the absolute path for the directory where we want the output to be placed
filename: 'my-first-webpack.bundle.js' // the name of the file that will contain our output - we could name this whatever we want, but bundle.js is typical
}
};
webpack.config.js 파일은 다음과 같습니다.const path = require('path');
module.exports = {
mode: "development", // could be "production" as well
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
}
};
NPM 스크립트
현재 우리는 웹 패키지 설정이 있습니다. 가방에 npm 스크립트를 추가해야 합니다.json.우리는 우리가 원하는 모든 단어를 선택할 수 있지만, '구축' 은 전통적이다.우리는 간단하게 '웹 패키지' 를 사용할 수 있다만약 Webpack이 변경 사항과 열 재로드를 감시하기를 원한다면, 우리는 끝에 '- w' 로고를 추가할 수 있습니다.(이 절차를 수행하지 않으면 Webpack을 실행해야 할 때마다 명령줄에서 로컬 복사본을 실행해야 합니다.)
NPM 스크립트는 다음과 같습니다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --w"
},
응?제 콘솔 안에 뭐가 있죠?
이것은 너의 첫 번째 가방이다.콘솔의 메타데이터는 가방의 크기를 알려 줍니다.정말!이제 ES 모듈을 사용하여 이 작업을 완료할 수 있습니다.즉, 프로그램이 커지면 JavaScript 파일 간에 함수를 가져오고 내보낼 수 있습니다.쿨!
인터넷에 올려주세요.
우리는 곧 끝난다.Webpack을 기본 번들로 구성했습니다.js'파일을 출력하고 '패키지를 출력합니다.js'파일은/public 디렉터리에 있습니다.
이제 JavaScript에서 ES 모듈을 사용할 수 있습니다.
click 함수가 브라우저에 존재하기 전에 어떻게 호출되었는지 기억하십니까?현재 우리는 export와 import 문법으로 game.js에서 그것을 도출하고 main.js에서 그것을 호출하여 이 문제를 완전히 피할 수 있다.이렇게:게임?js
// below the click() function
export default click;
매인.js
// at the top of main.js
import click from './game'
index.html 별도의 JavaScript 파일 두 개를 로드했습니다.현재, 이 파일의 모든 코드가 bundle.js 에 포장되어 있기 때문에, 우리는 간단하게 스크립트를 가리키는 bundle.js 로 표시할 수 있다.계속하여 스크립트 태그를
bundle.js 참조로 바꿉니다. <!-- <script src="../src/game.js" defer></script>
<script src="../src/main.js" defer></script> -->
<script src="bundle.js" defer></script>
open public/index.html.당신의 프로그램은 기능과 이전과 완전히 같아 보입니까?위대하다네가 한 모든 것이 옳다.
DevTools에서 찾아보고 소스 탭으로 이동합니다.너는
bundle.js를 클릭하고 멋진 묶음 자바스크립트를 관찰할 수 있을 것이다.잘 됐다!저희가 뭘 배웠죠?
Webpack은 모든 JavaScript 파일을 깔끔한 파일로 묶는 번들 도구입니다.Dell은 다음과 같은 사실을 알고 있습니다.
browserify 즐거운 코딩!👋
* "import"및 "export"키워드는 ES6에 도입되어 아직 보급되지 않았지만 로컬 브라우저에서 지원됩니다.ES 모듈을 네이티브 방식으로 로드하려면 스크립트 표시자
type="module" 속성을 지정합니다.그러나 HTTP 요청 수는 HTML 파일의 JavaScript 파일과 동일하게 됩니다.응용 프로그램이 증가함에 따라, 이 문제를 처리하고 싶지 않을 것입니다. 따라서, 묶음기와 Transpiler를 이해하는 것은 여전히 좋은 생각입니다.**From : "이 부울 속성은 스크립트가 문서를 분석한 후 DOMContentLoaded를 트리거하기 전에 실행될 것임을 브라우저에 표시하도록 설정되어 있습니다."
Reference
이 문제에 관하여(입문 안내서 웹 패키지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/carriepascale/a-very-beginner-s-guide-to-webpack-2jal텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
