데모 구축 및 Webpack 환경 구성 방법 소개-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-18 15:15:33

원래의

2563명이 탐색했습니다.

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

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이 실행됩니다. 정보

# 🎜🎜#은 dist 디렉토리에 있습니다. Bundle.js 파일 생성

live-server의 전역 설치:

npm install -g live-server

로그인 후 복사

설치가 완료된 후 live를 실행하세요. -server를 터미널에 설치하면 브라우저에 Hello Webpack이 표시됩니다. Information관련 권장사항:

명령줄을 사용한 Webpack 설치 단계# 🎜🎜#

# 🎜🎜#css 선택자는 무엇인가요? CSS 선택기 사용법 요약

위 내용은 데모 구축 및 Webpack 환경 구성 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!