MSBuild 및 Webpack

Question

VS2015에 Angular2 응용 프로그램을 개발 중이며 webpack 번들링 및 축소 환경을 동일하게 설정했습니다.

이 내 webpack.conf.js 나는 또한 다음 명령

cmd /c SET NODE_ENV=development&& webpack -d --color 

과 함께이를 호출하는 웹팩 작업 러너를 설치 한

switch (process.env.NODE_ENV) { 
 
    case 'prod': 
 
    case 'production': 
 
     module.exports = require('./config/webpack.prod'); 
 
     break; 
 
    case 'test': 
 
    case 'testing': 
 
     //module.exports = require('./config/webpack.test'); 
 
     break; 
 
    case 'dev': 
 
    case 'development': 
 
    default: 
 
     module.exports = require('./config/webpack.dev'); 
 
}

입니다

cmd /c SET NODE_ENV=production&& webpack -p --color 

설정이 정상적으로 작동하는 것 같습니다. 그러나이를 TFS 빌드 CI와 통합하려고합니다. webpack 명령은 프로젝트가 빌드 된 후에 시작되어야하며 webpack 빌드가 실패 할 경우 빌드 실패를보고합니다. 나는 그것은 그 내가 웹팩가 설치된 node_modules 폴더에서 명령을 시작하려고하면 오류와 함께 9009

실패

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

내 .csproj 파일에 다음 코드를 통합하기 위해 노력했다

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

아직도 헛되다. 이 기능을 작동 시키더라도 웹 팩에서 오류가 발생하면 VS 빌드가 실패하게되는지 확실하지 않습니다.

어떻게해야합니까?

Answer 1

개발 및 프로덕션 모드를 위해 package.json에 다른 스크립트를 추가하십시오. 그런 다음 Visual Studio의 AfterBuild 이벤트에서 다양한 구성으로 스크립트를 호출하십시오.

두 개의 스크립트, 'buildDev' 및 'buildProd' package.json에서 다음

추가 : 비주얼 스튜디오의 AfterBuild 이벤트에서

"scripts": { 
    "buildDev": "SET NODE_ENV=development && webpack -d --color", 
    "buildProd": "SET NODE_ENV=production && webpack -p --color", 
    } 

추가이 두 조건 명령 :

<Target Name="AfterBuild"> 
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" /> 
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" /> 
    </Target> 

마지막으로 webpack.conf.js는 다음과 같습니다.

switch (process.env.NODE_ENV.trim()) { 
    case 'prod': 
    case 'production': 
     module.exports = require('./config/webpack.prod'); 
     break; 
    case 'dev': 
    case 'development': 
    default: 
     module.exports = require('./config/webpack.dev'); 
     break; 
} 

중요 참고 :는 cmd를 명령 에 빈 공간을 취급로 process.env.NODE_ENV와 사용 트림() 함수에 있는지 확인은 "NODE_ENV = 개발 & & 웹팩 -d --color SET을 문자로 사용하고 NODE_ENV 변수에 추가하십시오. 따라서 '개발'이라고 설정하면 (개발 + 공백)으로 설정됩니다.

Answer 2

TFS CI 빌드의 경우 요구 사항을 충족하려면 다음 단계를 참조하십시오.

1. NPM 단계를 추가
2. 명령 줄 단계 추가

참고 : 웹팩 명령이 발생하지만 단계가/작업도 성공한다, 그렇지 않으면 필요 -bail 인수는있다 예외.

또한 변수 정의 (변수 탭)에