웹팩 사용자 정의 로더와 NPM에 게시

첫째, 로더의 공식 웹 사이트의 해석 :

　　(1)은 로더 모듈은 노드의 함수로서 도출된다. 로더는 자원을 변환 할 때이 함수가 호출됩니다. 주어진 함수가 호출 로더 API를 , 그리고를 통해 this 컨텍스트에 액세스 할 수 있습니다.

　　https://webpack.docschina.org/contribute/writing-a-loader

　　이 기능 2, 로더?

　　https://webpack.docschina.org/concepts/loaders/#loader-features

　　소스 코드로 변환하는 로더 모듈. 로더는 할 수 있습니다 import 또는 "부하"파일 전처리 모듈. 따라서 다른 빌드 도구 "작업 (작업)"와 유사한 로더 및 건물의 앞 단계에 대한 강력한 접근 방식을 제공합니다. 로더 할 수있는 데이터 URL로 다른 자바 스크립트로 언어 (예를 들어, 타이프 라이터) 또는 인라인 이미지 파일입니다. 로더는 심지어 당신이 자바 스크립트 모듈에서 직접 할 수 있습니다 import CSS 파일!

두, 세, 지역 개발 및 방법의 테스트 :

　　다음은 개발 및 생산 환경에서 달성 한 예이고, 다른 리소스 파일을 도입하는 각 경로. 첫째, 우리는 빌드 디렉토리에 로더를 쓰기 :

　　코드에서하는 index.js 정적 로더 :

하자 loaderUtils의 =은 ( '로더 - 유틸'을 필요로 ); 

module.exports = 기능 (소스) { 
  수 있도록 옵션 =의 loaderUtils.getOptions ( 이 ) || {}; 
  소스 = source.replace (/ (\ / 정적 \ /) (* \ (PNG | JPE g | GIF | WebP 형식)) / g, options.replace + $ 2.?.? );
  반환 소스 
}

　　시험 방법 1 싱글 로더 정합 (테스트)에서, 규칙은 단순히 객체에 의해 제공 될 수있는 `path.resolve` 로컬 파일을 가리키는

  규칙은 [ 
      { 
        시험 : /\.(js|vue|css)$/는 , 
        로더 : path.resolve은 (__ dirname은, './Loaders/static-loader/index.js는' ) 
        을 포함한다 : path.resolve (__이 dirname을 '../src' ) 
        제외 : path.resolve (__ dirname이, '../node_modules' ), 
        옵션 : { 
          대체 : process.env.NODE_ENV == '생산'? './production/static/': './development/static/' 
        } 
      } 
   ]

　　시험 방법 2 경기 (시험) 로더의 다수가 사용될 수있다 `resolveLoader.modules` 이들 디렉토리에서 웹팩 로더를 검색한다 구성.

  resolveLoader { 
    모듈 [ 
      path.resolve (__있는 dirname가 '../build/Loaders이' )
       'node_modules' 
    ] 
  } 
  모듈 { 
    규칙 [ 
      { 
        시험 : /\.(js|vue|css)$/ , 
        로더 : path.resolve (__ dirname은, './Loaders/static-loader/index.js가' ) 
        을 포함한다 : path.resolve (__ dirname은, '../src' ) 
        제외 : path.resolve (__이 dirname를, '.. / node_modules ' ), 
        옵션 : { 
          대체 : process.env.NODE_ENV =='생산 '? './production/static/': './development/static/'
    }

　　시험 방법 (3)는, 별도의 라이브러리와 사용할 수있는 패키지를 만들 수 있습니다 `npm link`테스트 할 프로젝트에 연관 될 수 있습니다.

　　1, 먼저 프로젝트, 다음 새 파일을 초기화하는 지방 행정 NPM 초기화에 GitHub의 저장소, 복제에 자신을 설립했다.

　　　 .gitignore를 사용 .npmignore는 node_modules는 제외됩니다. 로더 코드하는 index.js.

　　당신이 권한 문제가 발생하면이 로컬 저장소 폴더에 구현 NPM 링크, sudo는 NPM 링크를 실행

　　3, 다른 프로젝트 파일에, sudo는 NPM 링크 손님 - 티안 로더, 현재 디렉토리 node_modules에 프로젝트에서 낮은 로더 매핑 정의를 실행

　　　　https://docs.npmjs.com/cli/link

셋째, 로더는 NPM에 업로드됩니다

　　(1), NPM의 npmjs.com에서 처음으로 사서함을 설정하면 확인 이메일을 받게됩니다 후, 당신은 모듈을 게시하려면 링크를 클릭해야, 계정을 등록

　　2, 구현 NPM의 adduser 명령의 이름이나 NPM 로그인

　　3, 구현 NPM 게시, 오류를 발견 :

　 4, 잘못된 방향으로 해결 :

　　　　가. 창고가 Taobao의 이미지 라이브러리가되었다 설정되어 있는지 확인
　　　　　　NPM의 설정 get 및 레지스트리

　　　　　　https://registry.npm.taobao.org/

　　　　. 예라면 B, 다음 원래 창고로 다시 설정
　　　　　　//registry.npmjs.org : 설정 = HTTP를 SET 레지스트리 NPM
　　　　(로그인하지 않은 경우) C 로그인 계정.
　　　　　　사용자 또는 로그인을 추가 NPM NPM adduser 명령

　　　　라. 다시 발표
　　　　　　NPM 게시

　　　　e. 如发布成功，则再次将仓库地址设为淘宝镜像地址
　　　　　　npm config set registry=https://registry.npm.taobao.org/

　　5、发布上去后，在npmjs.com官网就可以看到自己的loader模块：

　　6、在项目中npm i custome-tian-loader，就可以和引入其他node模块一样引入自己的loader了：

rules: [
      {
        test: /\.(js|vue|css)$/,
        loader: 'custome-tian-loader',
        include: path.resolve(__dirname, '../src'),
        exclude: path.resolve(__dirname, '../node_modules'),
        options: {
          replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'
        }
      }
]