웹 팩 다 중 페이지 개발 실천

앞 에 쓰다
웹 팩 은 모듈 로 더 겸 포장 도구 로 js,css,페이지,이미지,영상 등 각종 자원 을 모듈 화 처리 할 수 있 습 니 다.현재 인터넷 에 많은 단일 페이지 의 웹 팩 모델 이 떠 돌 고 있 는데,그 많은 페이지 는?비교적 적 습 니 다.지금 은 여러 페이지 의 전단 모델 을 제공 합 니 다.잘 어 울 리 시 길 바 랍 니 다.
웹 팩 을 처음 접 했 을 때 웹 팩 은 한 페이지 에 만 적용 된다 고 생각 했 습 니 다.예 를 들 어 웹 팩+react,웹 팩+vue 등 입 니 다.저 는 웹 팩+vue 를 사용 하여 프로젝트 를 구축 하고 개발 하 는 과정 에서 웹 팩 의 강력 함 과 편 의 를 느 꼈 습 니 다.실제 프로젝트 수 요 를 바탕 으로 다 중 페이지 사이트 도 webapck 을 사용 하여 구축 할 수 있 을 까?그래서 탐색 을 시 작 했 고 결국은 비교적 완전한 해결 방안 을 구축 한 셈 이다.
본 고 는 하나의 실제 프로젝트 를 예 로 들 어 다 중 페이지 프로젝트 에서 웹 팩 을 어떻게 사용 하여 공정 화 구축 하 는 지 설명 한다.본 고 는 자신의 실천 경험 을 정리 한 것 이기 때문에 일부 해결 방안 이 가장 좋 은 것 이 아니 라 최적화 과정 에서 만약 에 잘못된 부분 이 있 으 면 지적 하 는 것 을 환영 합 니 다.
간단 한 소개
이 프로젝트 는 주로 웹 팩 2.x 구축 을 바탕 으로 gulp 를 보조 도구 로 합 니 다.전단 에 서 는 템 플 릿 엔진art-template을 사용 합 니 다.한 페이지 는 템 플 릿 파일 과 입구 파일 에 대응 합 니 다.입구 파일 에 서 는 import 또는 require 를 통 해 다른 모듈 을 도입 할 수 있 습 니 다.이 모듈 웹 팩 은 자동 으로 입구 파일 과 합 쳐 집 니 다.
전단 개발 환경 구축
주 디 렉 터 리 구조

├─dist          #          
└─src           #    
  ├─components     #    
  ├─static       #      
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #         js
  │   ├─lib     #   js 
  │   ├─services   #     
  │   └─util     #    js
  ├─template      #html  
  └─views        #  
   main.js       #    
gulpfile.js        #gulp    
package.json       #    
webpack.config.js     #webpack  

웹 팩 설정
입구 파일

//       
var entries = (function() {
  var jsDir = path.resolve(__dirname, 'src/static/js/services');
  var entryFiles = glob.sync(jsDir + '/*.js');
  var map = {};

  entryFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    map[filename] = filePath;
  });
  return map;
})();

이 방법 은 파일 의 절대 경로 에 파일 이름 을 만 드 는 맵 입 니 다.예 를 들 어

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

업데이트
열 업 데 이 트 는 정말 잘 쓰 지 않 고 개발 효율 을 크게 향상 시 켰 다.

//     
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

또한,plugin 에 new webpack.HotModuleReplacement Plugin()을 추가 하여 Hot Module Replacemen 을 켜 면 열 업 데 이 트 를 실현 할 수 있 습 니 다.
html 설정 생 성
같은 페이지 의 js 파일 과 템 플 릿 파일 의 이름 이 일치 하도록 약속 하고,최종 적 으로 이 js 에 따라 같은 이름 의 html 파일 을 생 성 합 니 다.

var htmlPages = (function() {
  var artDir = path.resolve(__dirname, 'src/views');
  var artFiles = glob.sync(artDir + '/*.art');
  var array = [];
  artFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    array.push(new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/template/index.html'),
      filename: filename + '.html',
      chunks: ['vendor', 'main', filename],
      chunksSortMode: function(chunk1, chunk2) {
        var order = ['vendor', 'main', filename];
        var order1 = order.indexOf(chunk1.names[0]);
        var order2 = order.indexOf(chunk2.names[0]);
        return order1 - order2;
      },
      minify: {
        removeComments: env === 'production' ? true : false,
        collapseWhitespace: env === 'production' ? true : false
      }
    }));
  });
  return array;
})();

유 니 버 설 모듈 을 구성 요소 로 추출
여러 페이지 에 필요 한 모듈 에 대해 서 는 일반적인 구성 요소 로 추출 할 수 있 습 니 다.구성 요소 의 구성 은 페이지 와 마찬가지 로 하나의.js 파일 과 하나의.art 파일,그리고 하나의.css 파일 로 js 파일 에 html 내용 을 렌 더 링 하고 마지막 으로 export 를 사용 할 때 직접 require 하면 됩 니 다.구체 적 실천 은 demo 를 참고 할 수 있 습 니 다.
문제 가 있다

새 페이지 를 만 들 때마다 웹 팩 서 비 스 를 다시 시작 해 야 합 니 다

글꼴 파일 을 압축 할 수 없습니다.font-face 를 통 해 압축 된 네트워크 글꼴 에 대해 서 는 좋 은 해결 방안 을 찾 지 못 했 습 니 다

demo
본 논문 이론 을 바탕 으로 하 는 demo,주소:webpack-multipage-demo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.