webpack4.41.0 구성 두 (_url 로더 로더 / 바벨 로더 / 사스 로더)

웹팩 로더는 수행 할 수있는 JS 파일 브라우저로 전환 한 같은 최종 형태 typesrcipt 파일로 소스 파일을 전처리하는 데 사용됩니다

( 참고 : 다음 구성 코드는 반드시 정확하게 낮은 콘크리트와 공식 웹 사이트와 동일하지 않습니다 https://webpack.docschina.org/loaders/ 우선, 구성 파일에 대한 일반적인 설명없이하면 webpack.config.js을 말한다 )

URL 로더

구성 파일 1. 로더 구성 (에 특정 구성 코드 https://webpack.docschina.org/loaders/file-loader/가 복사)

모듈 : { 
        규칙 : [ 
            { 
                시험 : /\.(png|jpg|gif)$/ 전, 
                사용 : [ 
                    { 
                        로더 : 'URL 로더' , 
                        옵션 : { 
                            제한 : 8192 
                        } 
                    } 
                ] 
            } 
        ] 
    }

코드를 구축하고 매장 input.js 얻은 이미지 폴더를 구축하고, 수입 input.js 동안 파일 항목을 삽입

 2. 우리는 로더를 사용하여 위의 적절한 너무 로더를 다운로드해야하기 때문에

첫째, 구성 파일을 생성해야 package.json을 , 명령을 입력 : 초기화 -y NPM

그런 다음 수행 NPM은 URL 로더를 설치는 -S 다운로드 URL 로더 및 (-S 대표는 package.json 프로파일을 설치 한 후 기록하는) NPM 파일 로더가 -S 설치

후 package.json 프로파일은 다음과 같이 나타납니다 :

3. 마지막으로 실행 웹팩, 포장 성공

 

---

 

 

바벨 로더

1. 명령을 설치합니다 :npm install -D babel-loader @babel/core @babel/preset-env webpack（preset-env负责剑将es6语法转成es5语法）

2. input.js 작성 다음 예제 코드

 3. 구성 파일에 규칙을 추가 (경우 구성하지 않는 직접 다음 패키지 코드를 패키지 한 후 그 코드는 코드 ES6 문법이있을 것이다 , 브라우저의 낮은 버전은 ES6 구문을 실행하지 않음)

CONST 경로 = ( '패스') 요구;

module.exports = {

    항목 : './input.js'

    출력 : {

        경로 : path.resolve (__ dirname이, 'DIST'),

        파일 이름 : 'output.bundle.js'

    },

    모듈 : {

        규칙 :

            {

                시험 : /\.(png|jpg|gif)$/i,

                사용하다: [

                    {

                        로더 : 'URL 로더'

                        옵션 : {

                            // 한계 64 기수보다 작은되고, 그것은 일반적인 실제 파일보다 크게된다

                            제한 : 8192

                        }

                    }

                ]

            },

             {

                시험 : /\.m?js$/,

                일부 파일을 제외 //

                제외 : / (node_modules | bower_components) /

                사용하다: {

                    로더 : '바벨 로더'

                    옵션 : {

                        프리셋 : '@의 바벨 / 사전 설정 ENV']

                    }

                }

            }

        ]

    }

}

 

4. 패키지 실행 명령 : 웹팩, 성공 패키지

 

---

 

 

말대꾸 로더

1. 명령을 설치합니다 :npm install sass-loader node-sass -D

　　　　　　NPM 스타일 로더 CSS 로더 설치 -D

2. 쓰기 규칙에 webpack.config.js에 추가

{ 
            테스트 : /\.scss$/ , 
            용도 : [
                 "스타일 로더" // 노드로 생성 JS 스타일 문자열 
                "CSS 로더" // ? CommonJS 모듈로 변환 CSS 
                "사스 로더" / / 컴파일 말대꾸 CSS, 노드 말대꾸 기본값을 사용 
            ] 
        }

 3. input.js 패키지로 마지막으로 위의 몇 가지 간단한 예제를 작성 좋아