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

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

php中世界最好的语言

풀어 주다： 2018-03-10 13:56:07

원래의

2006명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!