웹 팩 - dev - server 사용법, 보고 도 안 올 거 야. 찾 아와 ~

webpack-dev-server 의 용법 을 기록 하 다.
우선 기본 적 인 webpack.config.js 표기 법 을 살 펴 보 자.

    module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js'
        }
    }

설정 파일 은 입구 와 출구 를 제공 합 니 다. webpack 이것 에 따라 js 작업 을 진행 합 니 다.webpack 는 webpack --watch 명령 을 제공 하여 파일 의 변 화 를 동적 으로 감청 하고 실시 간 으로 포장 하 며 새 bundle.js 파일 을 출력 합 니 다. 그러면 파일 이 많 으 면 포장 속도 가 느 립 니 다. 또한 이러한 포장 방식 은 hot replace 할 수 없습니다. 즉, 매번 webpack 컴 파일 한 후에 브 라 우 저 를 수 동 으로 새로 고 쳐 야 합 니 다.webpack-dev-server 그 중 일부 기능 은 위의 두 가지 문 제 를 극복 할 수 있다.webpack-dev-server 는 주로 하나의 사용 express 을 작 동 시 켰 다 Http .그것 의 역할 은 주로 자원 파일 을 서보 하 는 데 쓰 인 다.그 밖 에 이 Http 와 client 는 websocket 통신 프로 토 콜 을 사 용 했 습 니 다. 원본 파일 이 바 뀌 면 webpack-dev-server 실시 간 으로 컴 파일 되 지만 마지막 으로 컴 파일 된 파일 은 대상 폴 더, 즉 위 에 설 정 된 것 으로 출력 되 지 않 았 습 니 다.

    output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

메모: 웹 팩 - dev - server 를 시작 하면 대상 폴 더 에서 컴 파일 된 파일 을 볼 수 없습니다. 실시 간 으로 컴 파일 된 파일 은 메모리 에 저 장 됩 니 다.그래서 많은 학생 들 이 웹 팩 - dev - server 를 사용 하여 개발 할 때 컴 파일 된 파일 을 볼 수 없습니다.
다음은 webpack 의 문서 와 webpack-dev-server 의 일부 소스 코드 를 결합 하여 어떻게 사용 하 는 지 설명 한다.
시동 을 걸다
시작 webpack-dev-server 은 두 가지 방식 이 있 습 니 다.

통과 cmd line

통과 Node.js API

배치 하 다.
저 는 주로 cmd line 의 형식 을 설명 하 겠 습 니 다. Node.js API 형식 은 여러분 이 공식 문 서 를 보 세 요.npm script 를 통 해 작 동 할 수 있 습 니 다.내 디 렉 터 리 구 조 는:

    app
    |__dist
    |   |__styles
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__src
    |   |__styles
    |   |__js
    |       |__index.js
    |__node_modules
    |__package.json
    |__webpack.config.js

content-base
서보 설정 webpack-dev-server 서보 설정 directory.설정 하지 않 으 면 기본 값 은 현재 디 렉 터 리 에 있 습 니 다.

webpack-dev-server --content-base ./dist

이 럴 때 주의해 야 할 것 은 webpack.config.js 파일 에 output 의 publicPath 필드 의 값 을 설정 했다 면 index.html 파일 에서 도 조정 해 야 한 다 는 것 이다.webpack-dev-server 서보 파일 은 상대 publicPath 라 는 경로 이기 때문이다.따라서 당신 의 webpack.config.js 이 이렇게 설정 되 어 있다 면:

    module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js'，
            publicPath: '/assets/'
        }
    }

그러면 index.html 파일 에 도 입 된 경로 에 도 해당 하 는 변화 가 발생 합 니 다.

webpack.config.js 에 설정 output publicPath 이 없 으 면 index.html 마지막 에 도 입 된 파일 js 경 로 는 다음 과 같 을 것 이다.

Automatic Refresh webpack-dev-server 2 가지 자동 새로 고침 방식 을 지원 합 니 다.

Iframe mode

inline mode

이 두 가지 모드 설정 방식 과 방문 경 로 는 약간 차이 가 있 습 니 다. 가장 중요 한 차이 점 은 Iframe mode 웹 페이지 에 하나의 iframe 를 삽입 하여 우리 자신의 응용 프로그램 을 이 iframe 에 주입 하 는 것 입 니 다. 그래서 매번 수정 한 파일 은 이 iframe 로 진행 되 었 습 니 다 reload.webpack-dev-server 의 원본 코드, lib 경로 의 Server.js 파일, 38 - 48 줄 을 보고 각각 몇 개의 흐름 을 새로 만 듭 니 다. 이 몇 개의 흐름 은 client 폴 더 의 관련 파일 을 저장 합 니 다.

    // Prepare live html page
    var livePage = this.livePage = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage);

    // Prepare the live js file
    var liveJs = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs);

    // Prepare the inlined js file
    var inlinedJs = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);

    // Init express server
    var app = this.app = new express();

    // middleware for serving webpack bundle
    this.middleware = webpackDevMiddleware(compiler, options);

    app.get("/__webpack_dev_server__/live.bundle.js", function(req, res) {
        res.setHeader("Content-Type", "application/javascript");
        liveJs.pipe(res);
    });

    app.get("/webpack-dev-server.js", function(req, res) {
        res.setHeader("Content-Type", "application/javascript");
        inlinedJs.pipe(res);
    });

    app.get("/webpack-dev-server/*", function(req, res) {
        res.setHeader("Content-Type", "text/html");
        this.livePage.pipe(res);
    }.bind(this));

Iframe mode 을 사용 할 때 요청 /webpack-dev-server/index.html 경 로 를 요청 할 때 client/index.html 파일 을 되 돌려 줍 니 다. 이 파일 의 내용 은 다음 과 같 습 니 다.

이 페이지 는 요청 live.bundle.js 할 것 입 니 다. 그 중에서 새로 만 들 것 입 니 다 Iframe. 응용 프로그램 은 이 Iframe 에 주입 되 었 습 니 다.또한 live.bundle.js 에는 socket.io 의 client 코드 가 포함 되 어 있어 webpack-dev-server 설립 된 http server 과 websocket 통신 할 수 있다.돌아 오 는 정보 에 따라 해당 동작 을 수행 합 니 다.Inline-mode 는 webpack-dev-server 당신 의 webpack.config.js 입구 설정 파일 에 입 구 를 추가 합 니 다.

    module.exports = {
        entry: {
            app: [
                'webpack-dev-server/client?http://localhost:8080/',
                './src/js/index.js'
            ]
        },
        output: {
            path: './dist/js',
            filename: 'bundle.js'
        }
    }

이렇게 해서 inlinedJS 를 bundle.js 에 포장 하 는 기능 을 완 성 했 고 inlinedJS 에 도 socket.io 의 client 코드 가 포함 되 어 있어 webpack-dev-server 와 websocket 통신 할 수 있다.
물론 당신 도 직접 당신 index.html 에 이 코드 를 도입 할 수 있 습 니 다.

그러나 Iframe mode 와 Inline mode 가 마지막 에 달성 한 효 과 는 모두 똑 같 습 니 다. 모두 감청 파일 의 변화 입 니 다. 그리고 컴 파일 된 파일 을 전단 으로 밀어 서 페이지 의 reload 를 완성 합 니 다.
Iframe mode Iframe mode 에서 cmd line 다른 내용 을 추가 할 필요 가 없습니다. 브 라 우 저 방문 경 로 는:

localhost:8080/webpack-dev-server/index.html。

이때 이 페이지 의 header 전체 reload 상태 가 나타 날 것 이다.원본 파일 을 바 꿀 때 자동 컴 파일 패키지, 페이지 자동 새로 고침 기능 을 완성 할 수 있 습 니 다.
Inline mode inline mode 을 사용 할 때 cmd line 다음 과 같이 써 야 합 니 다.

webpack-dev-server --inline --content-base ./dist

이 때 접근 하 는 경 로 는:

localhost:8080/index.html

자동 컴 파일 패키지, 페이지 자동 새로 고침 기능 도 완성 할 수 있 습 니 다.그러나 없 는 header 부분의 reload 메시지 에 따 르 면 콘 솔 에 서 는 reload 상태 가 표 시 됩 니 다.
Hot Module Replacement
오픈 Hot Module Replacemen t 기능, cmd line 에 추가 --hot

webpack-dev-server --hot --inline --content-base ./dist

기타 설정 옵션

--quiet             
--compress   gzip  
--progress        

그리고 모든 다른 설정 정 보 는 공식 문 서 를 조회 할 수 있 습 니 다.
webpack-dev-server-cli
이것 은 나의 package.json 파일 이다.

    {
  "name": "reptile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}

우선 명령 행: 모든 의존 도 를 입력 하 십시오.그리고 입력 npm install.브 라 우 저 에서 localhost: 8080 / index. html 를 열 면 즐겁게 개발 할 수 있 습 니 다.
로 컬 API 서버 구축
만약 에 로 컬 에서 npm run dev 을 시작 하면 api server 은 3000 이 고 이 port 는 주로 전단 응용 과 데이터 교 류 를 합 니 다.이 럴 때 도 메 인 을 뛰 어 넘 는 문제 가 발생 할 것 이 분명 합 니 다. 이 럴 때 전단 에 응 용 된 입구 파일 은 자신 이 시작 한 server 으로 제공 해 야 합 니 다.

    var express = require('express');
    var app = express();
    
    app.get('/', function(req, res) {
        res.send('xxx/xxx/index.html'); //      dist/index.html   
    })

그 밖 에 api server:

    module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js',
            publicPath: 'localhost:8080/dist'
        },
        devServer: {
            '/get': {
                targer: 'localhost:3000',
                secure: false
            }
        }
    }

webpack.config.js 필드 의 내용 을 절대 경로 로 설정 합 니 다.동시에 publicPath 파일 에서 index.html 인 용 된 경로 도 절대 경로 로 바 뀌 었 습 니 다.

js 에 대해 또 다른 문제 가 있 으 면 댓 글로 알려 주세요.
나머지 2 편의 web-dev-server 에 관 한 글:
웹 팩 1. x 패키지 및 비동기 로드 세트 웹 팩 2 패키지 및 비동기 로드 세트