webpack3.x의 입력, 출력, 모듈 분석-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

webpack3.x의 입력, 출력, 모듈 분석

php中世界最好的语言

Mar 10, 2018 pm 01:56 PM

module output

이번에는 webpack3의 입력, 출력, 모듈에 대한 분석을 가져오겠습니다.
오늘날 널리 사용되는 도구인 webpack은 세 가지 주요 프런트엔드 프레임워크와 분리될 수 없으므로 이를 배워야 합니다.

전제 조건: 노드 환경과 npm 도구가 있습니다. npm 도구);

단계별로 시작해 보겠습니다.

1. 먼저 프로젝트가 저장된 위치로 디렉터리를 선택합니다.

cmd 도구를 사용하여 프로젝트 디렉터리를 입력합니다(내 디렉터리는 D: webpack-demo4라고 가정). ; 그런 다음 nmp

를 사용하여

webpack을 설치합니다. npm install webpack --save-dev("전역 설치는 권장되지 않음") 완료한 후 원하는 경우 설명 내용을 포함하여 프로젝트 디렉터리에 npm init를 사용합니다. 생략하려면 npm init -y만 하면 됩니다.

webpack3.x의 입력, 출력, 모듈 분석 dist 및 src 디렉토리는 직접 생성하고, dist는 컴파일된 파일을 저장하는 데 사용되고, src는 소스 파일을 저장하는 데 사용됩니다. 모든 모듈은 이 디렉토리에 위치하며, webpack.config.js는 webpack 구성 항목입니다. 사실은 webpack용입니다);

　 Webpack.config.js 구성(지금은 너무 많습니다);

webpack3.x의 입력, 출력, 모듈 분석 우선 이 구성이 어떤 용도로 사용되는지 이야기해 보겠습니다. 패키징하는 방법을 하나씩 설명합니다.

항목:

항목 파일

입니다. 파일의 시작 부분은 cmd 명령으로 디렉터리에 들어갈 때 계산됩니다. 예를 들어 내 줄은 다음과 같습니다. [ webpack-demo4] --> 아래에 dist 디렉터리와 src 디렉터리가 있습니다. 구성을 실행할 때 webpack-demo4로 이동한 다음 webpack --config로 이동해야 합니다. webpack-config.js (또는 webpack 직접);

출력은 설정의 출력입니다. 위 설정의 결과는 webpack이 패키징된 후 dist 디렉터리의 js가 app.bundle을 생성한다는 것입니다. 이름은 실제로 항목의 핵심입니다.

모듈은 두 개의 로딩 파일과 CSS 로더를 저장합니다.

물론, webpack 로더 CSS 로더를 실행하기 전에 설치 스타일이 필요합니다. -save -dev 및 npm install file-loader --save -dev; 설치 시 webpak-demo4 디렉토리로 이동해야 합니다.

이제 dist 디렉토리에 직접 작성한 index002.html이 있습니다.

<html>
  <head>
   <title>Output Management(输出)</title>
    <meta charset=utf-8>
  </head>
  <body> 
  </body>
</html>
<script src="./js/app.bundle.js"></script>

로그인 후 복사

src 디렉토리에는 두 개의 js 파일이 있습니다.

　index.js
import _ from &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    btn.onclick = printMe;
    div.appendChild(btn);
    return div;
}
document.body.appendChild(component()); //放回元素给到页面;

로그인 후 복사

import '../css/style1.css'는 index.js style1과 관련된 상위 디렉토리(src) 아래에 있습니다. .css; 예를 들어 본문의 배경을 파란색으로 작성했습니다. 또한 img 아래에 이미지를 저장했습니다.

그런 다음 cmd 명령에 image와 print.js를 각각 도입했습니다. Webpack을 실행하면 dist 디렉토리를 확인하면 패키지된 js와 그림이 나타납니다. 위의 예는 webpack이 CSS, 그림 및 기타 간단한 작업을 어떻게 패키지하는지 보여줍니다. 이 기사에서 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7476

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

ModuleNotFoundError: Python 모듈을 찾을 수 없음 오류를 해결하는 방법은 무엇입니까? Jun 25, 2023 pm 09:30 PM

Python 개발 과정에서 모듈을 찾을 수 없다는 오류가 자주 발생합니다. 이 오류의 구체적인 표현은 Python이 모듈을 가져올 때 ModuleNotFoundError 또는 ImportError라는 두 가지 오류 중 하나를 보고한다는 것입니다. 이 오류는 매우 짜증나고 프로그램이 제대로 실행되지 않을 수 있으므로 이 기사에서는 이 오류의 원인과 해결 방법을 살펴보겠습니다. Pyth의 ModuleNotFoundError 및 ImportError

Java9 새로운 기능 모듈 모듈식 프로그래밍 방법 May 19, 2023 pm 01:51 PM

Java9 버전에서 Java 언어는 모듈이라는 매우 중요한 개념을 도입했습니다. JavaScript 코드의 모듈식 관리에 익숙하다면 Java 9의 모듈식 관리를 보면 익숙할 것입니다. 1. 자바 모듈이란 무엇입니까? Java의 패키지와 다소 유사하게 모듈은 또 다른 수준의 Java 코드 그룹화를 도입합니다. 이러한 각 그룹(모듈)에는 많은 하위 패키지가 포함되어 있습니다. 모듈의 소스 코드 파일 패키지 루트에 module-info.java 파일을 추가하여 폴더와 해당 하위 폴더를 모듈로 선언합니다. 파일 구문

프런트엔드 출력 설정 Feb 19, 2024 am 09:30 AM

프런트엔드 출력 구성에는 특정 코드 예제가 필요합니다. 프런트엔드 개발에서 출력 구성은 매우 중요한 구성입니다. 프로젝트가 패키징된 후 생성되는 파일 경로, 파일 이름 및 관련 리소스 경로를 정의하는 데 사용됩니다. 이 문서에서는 프런트 엔드 출력 구성의 역할, 일반적인 구성 옵션을 소개하고 특정 코드 예제를 제공합니다. 출력 구성의 역할: 출력 구성 항목은 프로젝트를 패키징한 후 생성되는 파일 경로와 파일 이름을 지정하는 데 사용됩니다. 프로젝트의 최종 결과물을 결정합니다. webpack 등으로 패키징

Linux 시스템에서 ntfs 디스크를 마운트할 때 '모듈 퓨즈를 찾을 수 없음' 문제를 해결하는 방법은 무엇입니까? Dec 31, 2023 pm 03:17 PM

1. 먼저 Linux 시스템 커널 [root@localhost~]#uname-r-p2.6.18-194.el5i6862를 확인하여 http://sourceforge.net/projects/linux-ntfs/files/로 이동하여 rpm 패키지를 다운로드합니다. 해당 커널 중 정확히 동일한 커널을 찾을 수 없으면 가장 가까운 커널을 찾을 수 있습니다. 내가 다운로드한 것과 똑같은 것을 찾을 수 없습니다: kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3 rpm 패키지를 설치합니다. -ivhkernel -m

웹팩의 핵심 개념인 Output Aug 09, 2022 pm 06:32 PM

모든 자산을 모은 후에는 webpack에 애플리케이션을 패키징할 위치를 알려주어야 합니다. webpack의 출력 속성은 번들 코드를 처리하는 방법을 설명합니다. 다음 글은 webpack의 핵심 개념 중 아웃풋(Output)에 대해 심도있게 이해하는 데 도움이 되길 바랍니다!

Vuex 모듈 - 상태 웨어하우스 파티셔닝 사용 소개 Aug 10, 2022 pm 04:01 PM

Vuex는 주로 State, Getter, Mutation, Action 및 Module의 다섯 가지 부분으로 구성됩니다. 아래에서는 Vuex 모듈 상태 웨어하우스 분할을 소개하겠습니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

PHP는 GD 이미지를 브라우저나 파일로 출력합니다. Mar 21, 2024 am 10:41 AM

이 글에서는 PHP가 GD 이미지를 브라우저나 파일로 출력하는 방법에 대해 자세히 설명할 것입니다. 꽤 실용적이라고 생각하므로 이 글을 읽으신 후 참고하실 수 있기를 바랍니다. PHP는 GD 이미지를 브라우저나 파일로 출력합니다. 소개 phpGD 라이브러리는 이미지 처리를 위한 강력한 기능을 제공하므로 이미지를 생성, 편집 및 출력할 수 있습니다. 표시 또는 추가 처리를 위해 이미지를 브라우저나 파일로 출력할 수 있습니다. 브라우저로 출력 이미지를 브라우저로 출력하려면 다음 단계를 따르십시오. 이미지 리소스 생성: imagecreate() 함수를 사용하여 이미지 리소스를 생성합니다. 이미지 데이터 로드: imagepng(), imagejpeg() 또는 imagegif() 사용

wps2019 테이블을 그림으로 내보내는 단계 Mar 27, 2024 pm 04:51 PM

1. wps2019를 사용하여 편집할 테이블을 엽니다. 2. wps2019 창 좌측 상단의 [파일] 메뉴 항목을 클릭하세요. 3. 팝업 파일 드롭다운 메뉴에서 [이미지로 내보내기] 메뉴 항목을 클릭합니다. 4. 사진 출력 창이 나타납니다. 창에서 출력 품질 형식을 선택하세요. 5. 형식 드롭다운 메뉴를 클릭하고 팝업 메뉴에서 이미지로 저장하려는 형식을 선택합니다. 6. 마지막으로, 뒤에 저장 옵션 버튼을 클릭하여 이미지를 저장할 위치를 설정합니다. 7. 확인을 클릭하면 잠시 후 출력이 성공했다는 메시지가 나타납니다.

See all articles