angular.js - 웹팩은 어떻게 라이브로드를 수행합니까?

Question

angular1 webpack es6을 사용하여 프로젝트를 만들려고 합니다. 빌드 구성에서 다음 두 가지 문제에 직면했습니다. 조언을 얻을 수 있기를 바랍니다.

1. 환경 전환 - 변수, API 주소 등 전환

2. 코드를 저장한 후에는 수동으로 컴파일하고 새로 고칠 필요가 없습니다. 페이지를 새로 고치지 않고도 CSS 변경 사항을 자동으로 컴파일할 수 있습니다.

현재 구성을 게시하세요.

으아악 으아악

Answer 1

Webpack에는 /a/11...

HMR API를 사용할 수 있습니다.

CSS의 경우 css-loader 또는 style-loader에 직접 통합되어야 하며 webpack-dev-server를 시작할 때 --hot 매개변수만 추가하면 됩니다.

JS 코드는 상태 문제, 특히 Angular와 관련되어 있으므로 추가 처리가 필요합니다.

Answer 2

라이브로드

개발 시 라이브로드 지원뿐만 아니라 핫 업데이트도 구현하는 webpack-dev-server를 사용하세요

환경 전환 - 변수, API 주소 등 전환

1. 스크립트 실행 시 변수(예: NODE_ENV=development)를 설정하고, webpack 구성에서 process.env.NODE_ENV를 읽어 환경을 구분할 수 있도록 하세요

2. 그런 다음 기본 구성, 개발용 구성, 프로덕션 환경용 구성 등 여러 구성 파일을 작성하여 다양한 환경도 구분할 수 있습니다

3. webpack은 일부 전역 변수를 정의할 수 있는 DefinePlugin도 제공합니다

페이지를 새로 고치지 않고 CSS를 변경하세요

핫 업데이트를 활성화하고 스타일 인라인 모드를 사용하세요

구체적인 구현은 /a/11...

을 참조하세요.

Answer 3

라이브로드를 수행하는 것은 웹팩이 아니지만 웹팩의 개발서버는 매개변수의 문제입니다. 물론, Express 등을 사용하여 자체 서버를 작성할 수도 있습니다. Gulp에는 파일 변경 사항을 모니터링하고 작업을 다시 실행할 수 있는 watch 명령이 있습니다. Gulp를 지원하는 서버를 사용할 수도 있습니다.

Answer 4

사용 webpack/hot/dev-server 就可以啊。
我自己总结的 webpack 패키지 구성:
http://yj1438.github.io/2016/...