Webpack Plugin 은 버 전 번호 등 설정 을 자동 으로 생 성하 고 전단 서버 를 통 해 위 챗 캐 시 오래된 코드 를 업데이트 하 는 문 제 를 가 져 옵 니 다.

[디 렉 터 리] 배경 설명 문제 사고방식 사용 예시

Env 버 전 변수 추가

플러그 인 코드

프로필 에 VersionPlugin 도입

버 전 번 호 를 검증 하고 처리

Shell 단말기 실행 패키지

최적화 하 다.

어떻게 컴 파일 명령 을 통 해 버 전 번 호 를 지정 합 니까?

기타 플러그 인 기타 처리 캐 시 방식 및 문제 참고 글

[TAG]:

Vue

JavaScript

Webpack Plugin

자동 버 전 번호

위 챗 캐 시 업데이트

배경
위 챗 H5 개발 중 문제 가 발생 했 습 니 다.

위 챗 H5 대 Index. html 캐 시 문제 로 인해 테스트 과정 에서 Release 버 전 을 발표 한 후에 도 사용자 측 에서 본 페이지 는 캐 시 된 html/js/cs

입 니 다.

자바 스 크 립 트 파일 하 도 급 상황 에서 프로젝트 를 다시 포장 한 후 발표 할 때 원래 js 파일 을 지 웠 기 때문에 html 캐 시 되 어 있 으 면 js 를 불 러 오지 못 하 는 오류 가 발생 합 니 다

수요 와 테스트 수요 로 인해 결제 채널 이 전환 되 어야 하고 매번 설정 매개 변 수 를 위해 TAG

를 반복 적 으로 제출 해 야 한다.
문 제 를 설명 하 다.

버 전 번 호 는 어떻게 자동 으로 생 성 됩 니까?버 전 번 호 를 지정 할 수 있 습 니까?

버 전 번호 등 설정 을 어떻게 가 져 옵 니까?Service 서버 API 를 통 해 얻 으 면 Service 에 침입 합 니 다. 인터페이스 학생 이 착하 면 괜 찮 습 니 다. 만약 에...

사고의 방향
자신의 문제 에 따라 스스로 해결 합 니 다. 전단 이 서버 로 달 리 는 이상 직접 설정 접근 파일 을 제공 하고 포장 할 때 복사 하 는 것 이 빠 르 지 않 습 니까?하지만 매번 테스트, 발표 할 때마다 수 동 으로 버 전 을 수정 해 야 합 니까?어떻게웹 팩 플러그 인 을 통 해 스 크 립 트 를 실행 하면 자동 으로 생 성 됩 니 다.
전제: js 등 파일 은 hash 를 통 해 파일 이름 을 설정 해 야 합 니 다. 그렇지 않 으 면 위 챗 캐 시가 만 료 되 기 전에 수 동 으로 캐 시 를 정리 할 수 밖 에 없 을 것 같 습 니 다.파일 이름 설정 참조
사용 예시
Env 버 전 변수 추가

//    
//   ：/config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  VERSION:'"v1.0 [' + new Date().toLocaleString() + ']"'
}
//   ：/config/dev.env.js
module.exports = merge(prodEnv, { //      merge,                 
  NODE_ENV: '"development"',
  VERSION: '""', //              ，                   
}
//   ：/config/index.js
module.exports = {
  dev: { ... },
  build: { env: require('./prod.env') }
}

플러그 인 코드

'use strict';

var FStream = require('fs');

/**
 *         
 * @author [email protected]
 * @param options
 * @constructor
 */
function VersionPlugin(options) {
  this.options = options || {};
  !this.options.versionDirectory && (this.options.versionDirectory = 'static');
}

// apply        ，            （new somePlugins({})），webpack       apply     
VersionPlugin.prototype.apply = function (compiler) {
  var self = this;
  compiler.plugin("compile", function (params) {
    var dir_path = this.options.context + '/' + self.options.versionDirectory;
    var version_file = dir_path + '/version.json';
    var content = '{"version":' + self.options.env.VERSION + '}';
    FStream.exists(dir_path, function (exist) {
      if (exist) {
        writeVersion(self, version_file, content);
        return;
      }
      FStream.mkdir(dir_path, function (err) {
        if (err) throw err;
        console.log('
    [' + dir_path + ']  ');
        writeVersion(self, version_file, content);
      });
    });
  });
  //   ' '        '       
  compiler.plugin("done", function (stats) {
    console.log("      ！");
  });
};

const writeVersion = (self, versionFile, content) => {
  console.log("
     ：" + self.options.env.VERSION);
  console.log("        ...");
  //    
  FStream.writeFile(versionFile, content, function (err) {
    if (err) throw err;
    console.log("        !");
  });
}

module.exports = VersionPlugin;

이 플러그 인 코드 는 다음 참고 글 에서 유래 했 습 니 다. 플러그 인 개발 참 고 는 플러그 인 을 어떻게 작성 합 니까?

프로필 에 VersionPlugin 도입

//   ：/build/webpack.prod.conf.js
const config = require('../config');
const VersionPlugin = require('./version-plugin');
const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new VersionPlugin({ path: config.build.assetsRoot, env: config.build.env, versionDirectory: 'static'}),
  ]
}

버 전 번호 검증 및 처리

//          ，   ：./src/main.js
import Vue from 'vue';
import router from './router';
import axios from 'axios';
import { ToastPlugin } from 'vux';
/** 
  * 〖Author〗 MiWi.LIN ＾＾＾＾〖E-mail〗 [email protected]
  *  Copyright(c) 2018/12/28
  * 〖Version〗 1.0
  * 〖Date〗 2018/12/28_  10:45
  */ 
const { VERSION } = process.env;

Vue.use(ToastPlugin);

function ifVersionCorrect(to, from, next) {
    ...
    next(); //        ,  next('/')      ，               router.beforeEach     
}

function checkVersion(to, from, next) {
  console.info('    ：', VERSION);
  axios.get(`../static/version.json?_=${Math.random()}`).then((response) => { //             
    if (response.status === 200 && VERSION !== response.data.version) {
      Vue.$vux.toast.text('     ，     ...');
      console.info('   ：', response.data.version);
      setTimeout(() => {
        location.reload(true);
      }, 500);
      return;
    }
    ifVersionCorrect(to, from, next);
  }).catch((err) => {
    console.error('checkVersion', err);
    ifVersionCorrect(to, from, next);
  });
}

router.beforeEach((to, from, next) => {
  //           
  if (!to.name) {
    next({ name: 'index' });
    return;
  }
  if (VERSION && to.name === 'index') { // VERSION prod.env   ，        
    checkVersion(to, from, next);
  } else {
    ifVersionCorrect(to, from, next);
  }
});

여 기 는 Index 에 들 어 갈 때 만 버 전 을 검사 하기 때문에 관련 논리 도 첫 페이지 Index. vue 에서 처리 할 수 있 습 니 다

셸 터미널 실행 패키지

> npm run build
     ："v1.0 [2018-12-28 10:00:41]"
        ...
        !

최적화 하 다.
어떻게 컴 파일 명령 을 통 해 버 전 번 호 를 지정 합 니까?

//   ：/config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  VERSION: JSON.stringify(process.env.VERSION_ENV) || '"v1.0 [' + new Date().toLocaleString() + ']"'
}
//   : /package.json
{
  "scripts": {
  "build:2": "cross-env VERSION_ENV=v2.0 webpack --config build/build.js"
  }
}

셸 터미널 실행 패키지

> npm run build:2

설명 하 다.

build: 2 를 설정 하지 않 으 면 터미널 에서 명령 내용 을 직접 입력 할 수 있 습 니 다. 실시 간 동적 설정 버 전 은 명령 이 너무 길다 고 생각 합 니까?Shell 터미널 의 alais 설정 을 보 러...

이렇게 하면 process.env.VERSION_ENV 를 통 해 값 v 2.0

을 얻 을 수 있다.

cross - env 에 대해 서 는 cross - env 를 사용 하여 크로스 플랫폼 설정 NODE 를 해결 하 는 것 을 참고 할 수 있 습 니 다.ENV 의 문 제 는 주로 서로 다른 시스템 환경 명령 호 환 문 제 를 해결 하 는 것 이다

.

cross - env 를 사용 하지 않 으 면 process.argv 을 통 해 명령 파 라 메 터 를 얻 을 수 있 습 니 다. 방식 참조:

for (var i in process.argv) {
  if (process.argv[i] === "--production") { ... }
}
//   process.argv.includes('--production')

기타 플러그 인
웹 팩 을 사용 하여 버 전 관리 도구 (웹 팩 - plugin - auto - version)GitHub versiony - package. json 의 프로젝트 버 전 번 호 를 자동 으로 수정 합 니 다.
기타 캐 시 처리 방식 및 문제
방식 1:
서버 nginx no - cache 설정 을 수정 하려 면 설정 을 운영 해 야 합 니 다 (시도 하지 않 았 습 니 다...)
방식 2:
Index. html 에서 no - cache 설정:

문제 가 있 습 니 다: - IGNORE. manifest 는 500 오 류 를 일 으 킬 수 있 습 니 다. 사용 시 개별 기종, 위 챗 버 전이 잘못 되 었 고 캐 시 파일 을 사용 하고 수 동 으로 새로 고침 해 야 합 니 다. - 위 에서 언급 한 하 도 급 문 제 를 해결 할 수 없습니다.
방식 3:
Cache Buster 방식: route url 에 버 전 번호 나 임 의 수 를 추가 합 니 다.
예:/index. html? v = 1\#/list
문제 가 있 습 니 다: - 프로젝트 업무 에서 위 챗 이나 다른 제3자 페이지 로 이동 한 후에 원래 의 논 리 는 매개 변 수 를 효력 을 잃 게 할 수 있 습 니 다. 원 캐 시 페이지 로 돌아 가 위 챗 에 캐 시 된 낡은 논 리 를 불 러 옵 니 다. - 위 에서 언급 한 하 도 급 문 제 를 해결 할 수 없습니다. - 위 챗 공중 번호 사용 장면 에서..매번 버 전 은 위 챗 배경 에서 URL 수정 - Vue 에서 같은 페이지 의 route 가 이동 할 때마다 캐 시 를 새로 고치 지 않 습 니 다. vue - router 소스 코드 분석 - 전체 절 차 를 참고 하 십시오.
방식 4:
앞에서 언급 한 것 은 학우 들 의 협조 가 필요 하 다.시스템 내 부 는 ajax 를 통 해 버 전 정 보 를 요청 하여 업 데 이 트 를 알려 줍 니 다.문제점: 백 엔 드 시스템 에 침입 성 이 있 고 하책 에 속한다.
참고 문장
웹 팩 + vue 프로젝트 사용자 정의 플러그 인 해결 전단 JS 버 전 업데이트 문제