자동화 구축 도구 3 - webpack

webpack。
웹 팩 은 모듈 패키지 입 니 다. 웹 팩 에서 볼 때 전단 의 정적 자원 은 모두 모듈 로 처리 되 고 모듈 의존 관계 에 따라 정적 자원 분석 을 하여 해당 하 는 정적 자원 을 생 성 합 니 다.
웹 팩 자 체 는 js / json 만 불 러 올 수 있 습 니 다. 다른 유형의 모듈 을 불 러 오 려 면 해당 하 는 loader 를 사용 하여 불 러 와 야 합 니 다.
loader 는 함수 입 니 다. 원본 파일 을 매개 변수 로 받 아들 여 변환 결 과 를 되 돌려 줍 니 다.
우리 먼저 웹 팩 으로 js 파일 을 포장 합 시다.
우선 웹 팩 3 * * 버 전 다운로드
npm install webpack@3 -g
npm install webpack@3 --save-dev
그리고 이 디 렉 터 리 에 src / js / entry. js 를 만 듭 니 다.

document.write("entry.js is work");

그리고 콘 솔 에 입력 하 세 요. webpack src/js/entry.js build/js/build.js 
이렇게 하면 bulid / js 에 bulid. js 라 는 파일 이 있 습 니 다. build 에 index. html 를 만 들 고 bulid. js 를 도입 하면 효 과 를 볼 수 있 습 니 다.
--------------------------------------------------------------------------------------------
가장 간단 한 파일 을 포장 하 는 방법 을 알 게 되 었 습 니 다. 그 다음 에 우 리 는 원본 파일 중의 js 에서 es6 의 모듈 화 방법 을 사용 하여 몇 개의 파일 을 도입 하여 어떻게 포장 하 는 지 보 겠 습 니 다.
src / js / 에 파일 을 만 들 고 있 습 니 다. 파일 이름 은 content. js 입 니 다.내용

function foo() {
    document.write("            ")
}

export default {
    foo
}

src / data / 에 파일 을 만 듭 니 다. 파일 이름 은 data. json 입 니 다.내용

{
  "name":"xiaoming",
  "age":18
}

주 모듈 src / js / entry. js 내용 은

//es6       content.js data.json
import content from "./content.js";
import data from  "../data/data.json"

//          json  
content.foo();
document.write("entry.js is work");
console.log(data);

이것 은 우리 가 포장 하면 메 인 파일, src / js / entry. js 만 포장 하면 됩 니 다.
콘 솔 입력 webpack src / js / entry. js build / js / build. js
메 인 모듈 만 포장 하면 최종 입력 모듈 에 내용 이 모두 있 습 니 다.
---------------------------------------------------------------------------------------
파일 을 포장 하려 면 항상 명령 행 창 에 코드 를 많이 써 야 합 니 다. 웹 팩 에 도 Grunt 와 Gulp 와 같은 프로필 이 있 습 니 다. 프로필 이 있 습 니 다. 콘 솔 에 웹 팩 을 입력 하면 자동 으로 프로필 을 읽 어 해당 작업 을 수행 합 니 다.
루트 디 렉 터 리 에 js 파일 webpack. config. js 파일 내용 만 들 기

//  node    
const path = require('path');

//    
module.exports = {
    //        
    entry: './src/js/entry.js',
    //       
    output: {
        //     ，__dirname          ,            
        //      ，      
        path: path.resolve(__dirname, 'build/js'),
        //        
        filename: 'bundle.js'
    }
};

설정 파일 이 있 으 면 명령 행 에 웹 팩 을 입력 하면 됩 니 다.
---------------------------------------------------------------------------
css 와 그림 포장
css 를 불 러 오 는 것 부터 시작 합 니 다. 웹 팩 은 기본적으로 js 와 json 만 불 러 올 수 있 기 때문에 css 를 불 러 오 려 면 해당 하 는 loader 를 다운로드 해 야 합 니 다.
npm install css-loader style-loader --save-dev
다운로드 한 후에 css 파일 을 만 들 고 메 인 모듈 에 도입 합 니 다. webpack. config. js 가 css 에 대한 처 리 를 설정 하고 마지막 으로 메 인 모듈 을 컴 파일 하여 html 파일 을 컴 파일 된 파일 로 도입 하면 됩 니 다.
css 파일 src / css / index. css 만 들 기

body{
    background-color: yellow;
}

주 모듈 에 src / js / entry. js 도입

import "../css/index.css"

웹 팩. config. css 에서 설정 합 니 다. 홈 페이지 에 있 는 해당 loader 에서 찾 을 수 있 도록 설정 하 는 방법 입 니 다.

module: {
        //    loader   ，       
        rules: [
            {
                //test             ，/\.css$/   css     
                test: /\.css$/,
                //              。
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }

두 개의 loader, css - loader 는 css 모듈 을 불 러 오고 css 를 컴 파일 하 는 데 사 용 됩 니 다. style - loader 는 컴 파일 된 css 를 웹 페이지 에 적용 하기 위해 서 입 니 다.
마지막 으로 명령 행 에 웹 팩 을 입력 하여 파일 을 컴 파일 하고 html 파일 은 컴 파일 된 파일 을 참조 하면 됩 니 다.
--------------------------------------------------------------------
다음은 그림 로드.
아니면 먼저 loader, npm install file - loader url - loader -- save - dev 를 다운로드 하 십시오.
그 다음 에 loader 설정 을 하고 css 는 두 개의 그림 을 도입 합 니 다. 하 나 는 8kb 이상 이 고 하 나 는 8kb 이하 이 며 그 다음 에 css 와 그림 을 불 러 옵 니 다.
그림 두 개 추가 src / imgs /
먼저 css 파일 을 사용 하여 두 개의 그림 src / css / index. css 를 참조 합 니 다.
웹 팩. config. js 설정

.box1{
    width: 200px;
    height: 200px;
    background: url("../imgs/big.jpg");

}

.box2{
    width: 200px;
    height: 200px;
    background: url("../imgs/logo.jpg");
}

마지막 으로 로드 합 니 다.그림 이 하나 없어 요.
콘 솔 의 오류 상황 을 보면 파일 을 찾 을 수 없습니다. html 에서 인 용 된 파일 을 찾 지 못 하면 자체 1 급 디 렉 터 리 로 찾 습 니 다. 따라서 index. html 와 js 파일 을 디 렉 터 리 에 넣 으 면 됩 니 다.
또 하나의 방법 은 웹 팩. config. jsz 에서 설정 하여 html 파일 에서 자원 을 찾 지 못 하고 자신의 html 에 비해 어디 를 찾 는 지 알려 주 는 것 입 니 다.

{
                //          
                test: /\.(png|jpg|gif)$/,
                //        url-loader  ，      8kb   base64   。
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }

-----------------------------------------------------------------------------------------
기본 적 인 로드 설정 은 우리 가 이미 말 을 끝 냈 으 니, 이어서 마지막 열 로드 에 대해 이야기 합 시다.
다운로드 하 다.
npm install webpack-dev-server@2 -g 
npm install webpack-dev-server@2 --save-dev
전역 적 으로 한 번 설치 하고 부분 적 으로 한 번 설치 해 야 합 니 다.
그리고 웹 팩. config. js 에서 설정 합 니 다.

output: {
        //     ，__dirname          ,            
        //      ，      
        path: path.resolve(__dirname, 'build/js'),
        //        
        filename: 'build.js',
        publicPath:"js/"

    },

그리고 명령 행 에 webpack - dev - server -- open 을 입력 하 십시오.  열 로드 를 실현 할 수 있 습 니 다.
주: -- open 은 이 페이지 를 자동 으로 열 수 있 도록 하기 위해 서 입 니 다. 
---------------------------------------------------------------------------------
마지막 으로 웹 팩 의 플러그 인 에 대해 말씀 드 리 겠 습 니 다. 오늘 은 두 개의 플러그 인 을 먼저 말씀 드 리 겠 습 니 다. 하 나 는 HtmlWebpackPlugin 이 고 하 나 는 cleanWebpackPlugin 입 니 다.
플러그 인 을 사용 하려 면 먼저 다운로드 한 다음 도입 하 십시오.
다운로드: npm install -- save - dev html - webpack - plugin clean - webpack - plugin
도입:

//webpack-dev-server       ，              ，      
    //    index.html   ，    index.html   build/js/ ，      
    //     ，  contentBase  index.html     
    devServer: {
        contentBase: 'build/js/'
    },

재 설정
4. 567913. 실행 되면 index. html 를 기반 으로 이전에 설 정 된 디 렉 터 리 를 자동 으로 기반 으로 필요 한 모든 파일 을 만 들 고 cleanWebpackPlugin 은 배열 의 폴 더 를 삭제 합 니 다.