웹팩3 (13) 개발 환경

이전 참고 사항:
문서 전문은 루트 디렉터리의 문서 설명을 보십시오.
가능하다면 본 프로젝트에 [Star]와 [Fork]를 추가하여 지속적으로 관심을 가져 주십시오.
의문점이 있으면 여기를 클릭하여 [Issues]를 보내주세요.
6. 개발 환경
6.0 사용 설명
설치:

npm install

실행:

npm run test

세 가지가 있는데, 순서대로 소개하다.
6.1 관찰 모드watch
키워드:
파일을 수정한 후 자동으로 컴파일되며 브라우저를 새로 고쳐야 새로 컴파일된 파일을 볼 수 있습니다.
사용 방법:
fork 프로젝트 후 npm install 설치 의존을 통과한 다음 npm run watch 실행하면 ok입니다.
이 효과는 모듈 파일을 편집하면 자동으로 컴파일을 터치합니다.
예를 들면 다음과 같습니다.

만약에 내가watch 모드를 사용했다면;

html-webpack-plugin를 통해 원본 html 파일을 도입한다.

이 html에 파일에 타이틀 라벨이 적혀 있지 않은 것을 발견;

그래서 나는 이 html 파일을 수정하고 타이틀 탭의 내용을 추가했다.

이때 웹 패키지는 대부분의 파일을 자동으로 다시 컴파일합니다(하나하나가 아닙니다).

전체 컴파일링 패키지보다 소모되는 시간이 적다([실전5]를 예로 들면 타이틀 탭 내용을 수정하거나 관련 js에 코드를 한 줄 추가하면 패키지 시간은 약 1700-1900ms, 전체 패키지는 약 6000ms 소모된다).

포장된 html 파일을 새로 고치면 다시 컴파일한 코드를 볼 수 있다.

이점:

코드를 수정한 후 리셋만 하면 포장된 효과를 볼 수 있다.

여러 번 포장할 필요가 없음;

단점:

매번 수정 후 갱신해야 하기 때문에 번거롭다.

일정한 UI 조작이 있어야만 결과를 얻을 수 있는 내용을 이런 방식으로 테스트하는 것은 매우 번거롭다.

6.2 웹팩-dev-server를 실시간으로 다시 로드
키워드:
파일을 수정한 후 컴파일하여 브라우저를 자동으로 새로 고칩니다.
사용 방법:
1.1 fork 프로젝트 형식
fork 프로젝트 후 npm install 설치 의존을 통과한 다음 npm run start 실행하면 ok입니다.
1.2 별도 설치
별도로 설치하면 먼저 npm install --save webpack-dev-server하고 webpack.config.js에 속성을 추가합니다.

// webpack-dev-server
devServer: {
    contentBase: './dist'
},

이 속성은 entry, output과 같은 등급입니다.
그리고 패키지에서.json에scripts:"start": "webpack-dev-server --open http://localhost:8080/login.html --config build/webpack.config.js" 추가
기본적으로 http://localhost:8080/login.html 이 페이지를 열 수 있습니다.index가 기본적으로 열려 있으면.html 페이지의 경우 뒤에 있는 URL은 생략할 수 있습니다.
실행npm run start을 실행하십시오.
2, 설치 후
URL: localhost:8080 이 뜨지만, 이 항목을 예로 들면, dist 폴더에 index가 없기 때문입니다.html, 그래서 내용을 표시할 수 없습니다.
URL을 http://localhost:8080/login.html로 변경하면 됩니다.
예를 들면 다음과 같습니다.

만약 당신이 성공적으로 시작하고login을 방문했다면.html 파일;

당신은 page/login/login_box.html 파일의 계정 입력 상자의 placeholder 속성을 수정했습니다.

웹팩-dev-server 트리거 컴파일은 모든 파일을 다시 컴파일합니다. (워치 모드보다 시간이 많이 걸립니다. 본 프로젝트의 경우 워치 2000ms에서 이 3000ms는 전체 컴파일된 6000ms보다 빠릅니다).

컴파일하면 자동으로 페이지를 리셋합니다.

이점:

더 이상 수정 후 끊임없이 페이지를 갱신할 필요가 없습니다.

단점:

그러나 매번 번역할 때마다 시간이 추가로 걸리고 번거롭다.

일정한 UI 조작이 있어야만 결과를 얻을 수 있는 내용을 이런 방식으로 테스트하는 것은 매우 번거롭다.

output 파일 이름은 사용할 수 없음[chunkhash]만 사용할 수 있음[hash]

6.3 중간부품 용기 웹팩-dev-middleware
키워드:
사용 방법:
1.1 fork 프로젝트 형식
fork 프로젝트 후 npm install 설치 의존을 통과한 다음 npm run server 실행하면 ok입니다.
1.2 별도 설치
express와 웹팩-dev-middleware를 먼저 설치합니다

npm install --save express webpack-dev-middleware

그리고 웹팩에서.config.js의 output에 publicPath: '/' 속성을 추가합니다. 예를 들어:

output: {
    path: __dirname + '/../dist',
    //    ，        bundle.js
    filename: '[name].[chunkhash].js',
    publicPath: '/'
},

build 디렉토리에서 새 파일server.js을 만듭니다. 내용은 다음과 같습니다.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
var opn = require('opn')

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
    console.log('Example app listening on port 3000!
');
});
opn('http://localhost:3000/login.html')

패키지에서.json 파일에 scripts 추가:

"server": "node build/server.js"

루트 디렉터리에서 명령을 실행하기 때문에 주의하십시오, 서버.js는build 폴더 아래에 있기 때문에 build/server.js 가 필요합니다.
예를 들면 다음과 같습니다.

watch모드와 웹팩-dev-server모드를 직접 비교하세요:

도 서버 기능을 가지고 있지만 웹팩-dev-server는 간단한 웹 서버를 사용하는데 이것은express의 서버를 사용한다.

watch 모드와 유사하며 이것만 사용하면 (아무런 설정이 없음) 페이지를 수동으로 새로 고쳐야 수정된 코드를 얻을 수 있습니다.

이점:

watch 모드보다 서버가 하나 더 많습니다.비교해 보면 파일 경로에서 접근할 필요가 없거나 스스로 서버를 추가로 만들어서 접근할 필요가 없다.

는 HMR(모듈 열교체)의 기초이다.

단점:

단순히 이것을 사용하면 HMR을 실현할 수 없으며 추가 설정이 필요하다.

6.4、HMR
단순히 개발 중인 서버(DevServer)를 사용하면 우리가 예상한 효과에 도달할 수 없다. 코드를 수정한 후에 페이지를 새로 고칠 필요가 없이 페이지에 변화를 나타낼 수 있다.
따라서 HMR을 사용해 다음 블로그를 참조해야 한다.