webpack-- 타사 로더

도 1에서, 구성 프로세스 CSS 스타일 시트 의 타사 로더

　　웹팩 기본은 JS 포장 할 수있는 파일의 처리 유형은 비 JS 파일 형식을 처리 할 수 없습니다 * .CSS 파일을 처리하기 위해, 당신은 수동으로 그것을 바로 타사 로더 로더를 설치해야합니다 :

NPM 나는 스타일 로더 CSS 로더 -D

　　webpack.config.js 수정

VAR의 경로 = 제 ( '패스'요구 ) 

// 노드의 모듈의 동작을 통해 구성 객체 외측 노출 
module.exports = { 
    (__ dirname은, path.join 출품 './src/main.js를') // 포장 웹팩 파일을 사용하여 표시 항목, 
    출력 : {    // 출구 
        경로 : path.join (__ dirname이, './dist' ), 
        파일 이름 : 'bundle.js' 
    } 
    으로 Module1 : {   // 모든 제 3 자에 대한 구성 모듈 로더 
        규칙 :   // 모든 타사 모듈 일치 규칙 
            { 
                테스트 :. / \ CSS $ / 
                사용 : [ '스타일 로더', 'CSS-로더'] 
            } 
        ] 
    }
};

　　그런 다음 main.js에서 .css 파일, main.js 내용을 가져올 수 있습니다 :

// 이 항목 JS 프로젝트 파일입니다 

// 가져 오기 jQuery를가 
// 이이 모듈 ES6 구문에 도입 
$ 'jQuery를'가져 오기 , 

가져 오기 './css/common.css을' ; 

$ ( 함수 () { 
    $ ( ' 리 : '. () CSS'ODD 중의 backgroundColor ','노란색 ' ); 
    $ ( '리 : 짝수 ') CSS (.'는 backgroundColor로 ','의 Eee # ' ); 
});

　　common.css 내용 :

.blue { 
    배경 - 색상 : 블루; 
}

　　그런 다음, 웹팩 명령, bundle.js를 다시 생성.

URL이 로더를 사용하여 웹팩 2 : URL에 CSS의 파일을 처리 소개

　　타사 로더 로더를 설치합니다 :

NPM 난, URL 로더 파일 로더를 -D

　　webpack.config.js 수정

VAR의 경로 = 제 ( '패스'요구 ) 

// 노드의 모듈의 동작을 통해 구성 객체 외측 노출 
module.exports = { 
    (__ dirname은, path.join 출품 './src/main.js를') // 포장 웹팩 파일을 사용하여 표시 항목, 
    출력 : {    // 출구 
        경로 : path.join (__ dirname이, './dist' ), 
        파일 이름 : 'bundle.js' 
    } 
    으로 Module1 : {   // 모든 제 3 자에 대한 구성 모듈 로더 
        규칙 :   // 모든 타사 모듈 일치 규칙 
            { 
                테스트 : /\.css$/ , 
                사용 : [ '스타일 로더', 'CSS-로더' ] 
            }
            { 
                시험 : /\.(jpg|png|gif|bmp|jpeg)$/, 
                용도 : [ 'URL 로더' ] 
            } 
        ]
    }
};

　　common.css 내용 :

.blue { 
    배경 색 : 블루; 
} 

div.img { 
    폭 : 200 픽셀; 
    높이 : 200 픽셀; 배경 : 홈페이지 ( '../ 이미지 / a.jpg'); 
    배경 크기 : 커버; 
}

　　index.html을

<! DOCTYPE HTML > 
< HTML > 
< 머리 > 
    < 제목 >标题</ 제목 > 
    < 메타 문자 집합 = "UTF-8" > 
    < 스크립트 유형 = "텍스트 / 자바 스크립트" SRC = "../ DIST / bundle.js" > < / 스크립트 > 
</ 머리 > 
< 몸 > 
    < H3 클래스 = "블루" > H3标签内的文本</ H3 > 
    < UL >
        이것은 리튬 태그 인 </ 리 > 
        < 리 > 이 리튬 태그 인 </ 리 > 
        < 리 > 이 리튬 태그 인 </ 리 > 
        < 리 > 이 리튬 태그 인 </ 리 > 
        < 리 > 입니다 라벨 리 </ 리 > 
    </ UL > 

    < DIV 클래스 = "IMG" > </ DIV > 
</ 몸 > 
</ HTML >

추천