데모 구축 및 Webpack 환경 구성 방법 소개
- 不言원래의
- 2018-08-18 15:15:332481검색
이 글에서는 웹팩 환경을 구성하기 위한 데모 설정 방법을 소개합니다. 필요한 친구들이 참고하면 좋겠습니다. 도움이 되세요.
1. 데모를 생성합니다
2. 생성된 webpack_demo 디렉터리에 들어가서 dist 폴더(프로덕션용)와 src 폴더(개발 환경용)를 생성합니다.
/dist/index.html#🎜 아래에 index.html 파일을 수동으로 만듭니다. 🎜#
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title></head><body>
<p id="title"></p>
<script src="./bundle.js"></script></body></html>설명: 여기서는 Bundle.js 파일을 소개합니다. 나중에 webpack을 사용하여 src
아래에 Entry.js 항목 파일을 생성할 수 있습니다. #🎜🎜 #
/src/entry.js:document.getElementById(‘title’).innerHTML=’Hello Webpack’;그런 다음 웹팩 패키징을 진행합니다.
#🎜 🎜#
1. 터미널에 vs 코드를 입력하세요: webpack src/entry.js dist/bundle.js 성공적으로 실행되면 dist 디렉터리에 Bundle.js 파일이 생성되고 Hello Webpack이 실행됩니다. 정보 2 다음과 같이 패키징될 수도 있습니다: webpack src/entry.js –output dist/bundle.js –mode development
# 🎜🎜#은 dist 디렉토리에 있습니다. Bundle.js 파일 생성
live-server의 전역 설치:npm install -g live-server
설치가 완료된 후 live를 실행하세요. -server를 터미널에 설치하면 브라우저에 Hello Webpack이 표시됩니다. Information
관련 권장사항:
명령줄을 사용한 Webpack 설치 단계# 🎜🎜#
# 🎜🎜#css 선택자는 무엇인가요? CSS 선택기 사용법 요약
위 내용은 데모 구축 및 Webpack 환경 구성 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.