webpack 구성에서 동적 코드를 실행하는 방법

Question

webpack에서 여러 각도 지시문/필터/서비스를 사용하고 싶습니다. 그래서 일반적으로 그 파일 중 일부에 대한 각진 모듈을 만들고 싶습니다. (항상 다른 일부 사용자 입력에 기반, 그러나 이것은이 티켓의 문제가되지 않습니다)가 보이는, 그래서 내가 webpack.config에서 나의 JS 파일에서 웹팩 사용

이 특정에 따라서

webpack({ 
     entry: { 
     firstFile: path.resolve(__dirname,'../path/to/firstFile.js'), 
     secondFile: path.resolve(__dirname,'..//path/to/secondFile.js') 
}, 
    output: { 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       test: 'Path to file to babel', 
      } 
     ] 
    } 
}, function(err, stats) { 
}); 

예를 들어 bundle.js을 firstFile.js에서 빌드하고 secondFile.js을

번들로 만들면 문제없이 번들을 만들지 만 여기서 angular.module을 만들기 위해 일부 코드가 누락됩니다.

그것은 같은 것을 포함한다 :

import firstFile from '../path/to/firstFile.js' 
import secondFilefrom '../path/to/secondFile.js' 
const ngModuleName = 'myModuleName' 
export default ngModuleName 
const ngModule = angular.module(ngModuleName, []) 
ngModule.directive('firstFile', firstFile) 
ngModule.filter('secondFile', secondFile) 

: 나는 정적 파일 함께 할로

const ngModuleName = 'myModuleName' 
export default ngModuleName 
const ngModule = angular.module(ngModuleName, []) 
ngModule.directive('firstFile', firstFile) 
ngModule.filter('secondFile', secondFile) 

혹은 아래 그렇게 direcly 다른 항목없이 코드의 단지 이런 종류의 실행, 같은 그것을 할을 어떻게 든 엔트리 내부에서 실행할 수 있습니까? 또는 다른 방법으로 동적으로 소스 코드를 웹팩 프로세스에 추가하는 방법은 무엇입니까? 조언

Answer 1

에 대한

덕분에 나는 내가 웹팩 로더를 통해 원하는 뭔가를 할 가능성이 있음을 발견했다.

는 기본적으로 나는 내 자신의 로더를 작성하고 내가 좋아하는 webpack.config에서 사용 :

{ 
    test: bin_dir, 
    loader: path.resolve(__dirname, 
     "./my-loader.js?"+JSON.stringify(myLoaderSettings)) 
}, 

그리고 나의 로더에 내가 쉽게 입력 파일의 소스를 조작 할 수 있습니다. 필자의 경우 필자는 새로운 블랭킹 파일을 추가하여 소스에 필요한 항목을 추가했습니다.

module.exports = function myLoader(source) { 
    // Source code of existing entry 
    console.log(source); 
    // Query, in my case it's result of JSON.stringify(myLoaderSettings) 
    console.log(this.query); 
}