webpack에서 다중 페이지 개발을 구현하는 방법

이 글은 주로 웹팩 다중 페이지 개발 실습을 소개하고 있습니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고하겠습니다. 에디터 따라가서 살펴볼까요

앞서 작성

Webpack은 js, css, 페이지, 사진, 동영상 등 다양한 리소스를 모듈화할 수 있는 모듈 로더 및 패키징 도구입니다. 요즘 인터넷에는 단일 페이지 웹팩 모델이 많이 돌아다니는데, 다중 페이지는 어떨까요? 그래서 이제는 다중 페이지 프런트엔드 모델을 제공합니다. 모두가 사용할 수 있기를 바랍니다.

처음 webpack을 접했을 때 webpack은 webpack+react, webpack+vue 등 단일 페이지 애플리케이션에만 적합하다고 생각했습니다. 저는 webpack+vue를 활용하여 프로젝트를 구축하고 개발하는 과정에서 webpack의 위력과 편리함을 직접 느껴봅니다. 실제 프로젝트 요구에 따라 webapck를 사용하여 다중 페이지 사이트도 구축할 수 있는지 궁금합니다. 그래서 저는 몇 가지 탐색을 시작했고 마침내 비교적 완전한 솔루션을 구축했습니다.

이 기사에서는 다중 페이지 프로젝트에서 엔지니어링 구축을 위해 웹팩을 사용하는 방법을 설명하기 위해 실제 프로젝트를 예로 들어 설명합니다. 이 글은 저의 실제 경험을 요약한 것이므로 일부 솔루션은 최적이 아니며 아직 탐색 및 최적화 중이므로 오류나 누락이 있으면 지적해 주시기 바랍니다.

소개

이 프로젝트는 주로 webpack2.x를 기반으로 구축되었으며 gulp를 보조 도구로 사용합니다. 프런트 엔드는 템플릿 엔진으로 art-template을 사용합니다. 한 페이지는 템플릿 파일과 항목 파일에 해당합니다. 다른 모듈은 가져오기 또는 요구를 통해 항목 파일에 자동으로 이러한 모듈을 병합합니다. 파일.

프론트 엔드 개발 환경 구축

기본 디렉터리 구조

├─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配置

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'
}

hot update

핫 업데이트는 단순히 사용하기 쉽지 않으며 개발 효율성을 크게 향상시킵니다.

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

또한 새로운 webpack.HotModuleReplacementPlugin()을 플러그인에 추가하고 핫 모듈 교체를 활성화하여 핫 업데이트를 수행하세요.

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 파일로 구성되어 있으며, html 콘텐츠는 js 파일로 렌더링되어 최종적으로 사용 시 직접 요구할 수 있습니다. . 구체적인 사용법은 데모를 참고해주세요

문제가 있습니다

1. 새 페이지를 생성할 때마다 웹팩 서비스를 다시 시작해야 합니다

2. 폰트 파일은 압축할 수 없습니다. 웹 글꼴 압축을 위해. Font-face를 통해 소개된 현재 더 나은 솔루션은 없습니다. 솔루션

demo

이 기사의 이론을 기반으로 한 데모입니다. 주소는 webpack-multipage-demo

위 내용은 제가 편집한 것입니다. 여러분. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue에서 숫자 입력 상자 구성 요소를 구현하는 방법

jquery를 사용하여 왼쪽 및 오른쪽 사이드바 크기 조정 효과를 얻는 방법

JS 함수의 setTimeout에 대한 자세한 소개

in mongoose 객체 업데이트에 대한 자세한 소개

JavaScript에서 AOP를 구현하는 방법

위 내용은 webpack에서 다중 페이지 개발을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!