웹 팩 4 시리즈 튜 토리 얼 (15): 개발 모델 및 웹 팩 - dev - server

저 자 는 튜 토리 얼 에서 보 여 준 그림 은 github 창고 그림 을 사용 하기 때문에 인터넷 속도 가 너무 느 린 친 구 는 의 원문 주 소 를 옮 겨 주 십시오.저의 작은 역 에 와 서 더 많은 오리지널 콘 텐 츠 를 보 는 것 을 환영 합 니 다: godbmw. com, '자세' 교 류 를 합 니 다.
0. 과정 소개 와 자료

> > > 본 수업 의 원본 코드

> > > 모든 과정 소스 코드

이 수업 의 코드 목록 은 다음 과 같다.
이 시간 에 사용 할 plugin 과 loader 의 설정 파일 package.json 은 다음 과 같 습 니 다.

{
  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }
}

1. 왜 개발 모델 이 필요 한가?
이전 과정 에서 우 리 는 모두 매개 변 수 를 지정 하지 않 았 다 mode.그러나 실행 webpack 을 포장 할 때 자동 으로 production 으로 설정 되 지만 콘 솔 에 서 는 warning 알림 이 나온다.개발 모델 은 지정 mode development 이다.
개발 모델 에서 우 리 는 코드 를 디 버 깅 해 야 한다.대응 하 는 설정 은: devtool source-map 로 설정 합 니 다.비 개발 모드 에 서 는 포장 부 피 를 줄 이기 위해 이 옵션 을 닫 아야 합 니 다.
개발 모델 에서 열 과부하, 경로 재 설정, 프 록 시 연결 등 기능 이 필요 합 니 다. webpack4 이미 devServer 옵션 을 제공 하여 로 컬 서버 를 시작 하여 개발 자 들 이 이 기능 을 사용 하도록 합 니 다.
2. 개발 모델 을 어떻게 사용 합 니까?
글 의 시작 package.json 설정 에 따라 명령 행 에 입력 하면 개발 자 모드 를 시작 할 수 있 습 니 다.
시작 효 과 는 다음 그림 과 같 습 니 다:
콘 솔 에서 패키지 정 보 를 출력 했 지만 디스크 에 폴 더 와 패키지 파일 을 만 들 지 않 았 습 니 다.콘 솔 의 패키지 파일 에 대한 내용 은 메모리 에 저 장 됩 니 다.
3. 필요 한 파일 을 작성 합 니 다.
우선 입구 의 html 파일 을 작성 하 십시오:

  
  
  
  


  This is Index html

그 다음 에 프로젝트 디 렉 터 리 에 따라 npm run dev 아래 의 세 개의 js 파일 을 간단하게 밀봉 하여 편리 하 게 /dist/ 호출 할 수 있 습 니 다.

// minus.js
module.exports = function(a, b) {
  return a - b;
};

// multi.js
define(function(require, factory) {
  "use strict";
  return function(a, b) {
    return a * b;
  };
});

// sum.js
export default function(a, b) {
  console.log("I am sum.js");
  return a + b;
}

자, 본론 으로 들 어 갈 준 비 를 하 세 요.
4. webpack 프로필 작성
4.1 설정 코드
설정 내용 이 좀 많 기 때문에 코드 를 넣 고 설명 을 넣 습 니 다./vendor/ 설정 은 다음 과 같다.

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: "/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  mode: "development", //     
  devtool: "source-map", //     
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8000, //         
    hot: true, //    
    overlay: true, //       ，         “   ”。    vue-cli     
    proxy: {
      //       
      "/comments": {
        target: "https://m.weibo.cn",
        changeOrigin: true,
        logLevel: "debug",
        headers: {
          Cookie: ""
        }
      }
    },
    historyApiFallback: {
      // HTML5 history  
      rewrites: [{ from: /.*/, to: "/index.html" }]
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"]
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery"
    })
  ]
};

4.2 모듈 핫 업데이트
모듈 열 업데이트 app.js 와 webpack.config.js 두 플러그 인 이 필요 하 며 순서 가 틀 리 면 안 됩 니 다.또한 HotModuleReplacementPlugin 를 NamedModulesPlugin 로 지정 했다.
이 두 개의 플러그 인 이 있 으 면 프로젝트 의 js 코드 에서 변 경 된 파일 을 검색 하고 관련 처 리 를 할 수 있 습 니 다.
예 를 들 어 우 리 는 개발 모델 을 시작 한 후에 devServer.hot 이 파일 을 수정 했다. 이때 브 라 우 저의 콘 솔 에 정 보 를 인쇄 해 야 한다.그러면 true 에서 이렇게 쓸 수 있다.

if (module.hot) {
  //           
  module.hot.accept("./vendor/sum.js", function() {
    //         ,        
    console.log("/vendor/sum.js is changed");
  });
}

vendor/sum.js 이 수 정 될 때마다 자동 으로 리 셋 함 수 를 실행 할 수 있다.
4.3 크로스 에이전트
전후 단 분리 개발 이 보편화 되면 서 크로스 오 버 요청 이 흔 해 졌 다.빠 른 개발 을 위해 app.js 를 이용 하여 프 록 시 리 트 윗 을 하여 브 라 우 저의 크로스 도 메 인 제한 을 돌아 갈 수 있 습 니 다.
앞의 설정 파일 에 따라 웨 이 보 의 인 터 페 이 스 를 호출 하려 면: sum.js.코드 에서 devServer.proxy 를 요청 하면 됩 니 다.

$.get(
  "/comments/hotflow",
  {
    id: "4263554020904293",
    mid: "4263554020904293",
    max_id_type: "0"
  },
  function(data) {
    console.log(data);
  }
);

4.4 HTML5--History
프로젝트 사용 https://m.weibo.cn/comments/hotflow 시 임의의 404 응답 이 대 체 될 수 있 습 니 다 /comments/hotflow.
SPA (단일 페이지 응용) 에서 모든 응답 은 직접 대 체 됩 니 다 HTML5 History API.
vuejs 공식 비계 index.html 에서 개발 모델 에서 다음 과 같이 설정 합 니 다.

// ...
historyApiFallback: {
  rewrites: [{ from: /.*/, to: "/index.html" }];
}
// ...

5. 입구 파일 작성
마지막 으로 앞의 모든 것 을 바탕 으로 아래 입구 파일 index.html 을 작성 합 니 다.

import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});

$.get(
  "/comments/hotflow",
  {
    id: "4263554020904293",
    mid: "4263554020904293",
    max_id_type: "0"
  },
  function(data) {
    console.log(data);
  }
);

if (module.hot) {
  //           
  module.hot.accept("./vendor/sum.js", function() {
    //         ,        
    console.log("/vendor/sum.js is changed");
  });
}

6. 효과 검출
명령 행 입력: vue-cli 서버 를 열 면 자동 으로 브 라 우 저 를 엽 니 다.다음 그림 에서 보 듯 이:
콘 솔 을 열 면 코드 가 정상적으로 작 동 하 는 것 을 볼 수 있 습 니 다.그 밖 에 app.js 이 열 렸 기 때문에 코드 위 치 를 찾 을 수 있 습 니 다 (아래 그림 녹색 상자 내).
7. 참고 자료

dev - server 문서:https://www.webpackjs.com/configuration/dev-server/

개발 모델 문서:https://www.webpackjs.com/guides/development/