>  기사  >  웹 프론트엔드  >  데모 구축 및 Webpack 환경 구성 방법 소개

데모 구축 및 Webpack 환경 구성 방법 소개

不言
不言원래의
2018-08-18 15:15:332547검색

이 글에서는 웹팩 환경을 구성하기 위한 데모 설정 방법을 소개합니다. 필요한 친구들이 참고하면 좋겠습니다. 도움이 되세요.

1. 데모를 생성합니다

2. 생성된 webpack_demo 디렉터리에 들어가서 dist 폴더(프로덕션용)와 src 폴더(개발 환경용)를 생성합니다.

src 폴더 : 우리가 작성한 자바스크립트 코드를 저장하는데 사용되는데, 이는 간단히 자바스크립트로 작성된 모듈로 이해하면 됩니다.

dist 폴더 : 브라우저가 읽을 수 있는 파일을 저장하는데 사용되는 파일입니다.

3. 프로그램 파일을 작성합니다.


dist 파일

/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으로 문의하세요.