webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계 분석

이번에는 webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계에 대한 분석을 가져오겠습니다. webpack을 사용하여 다중 페이지 애플리케이션을 구축할 때 주의 사항은 무엇입니까?

웹팩의 구성 및 사용에 관한 기사는 이미 인터넷에 많이 있으며, 그 중 대부분은 단일 페이지 애플리케이션에 관한 것입니다. 여러 HTML을 패키징해야 하는 경우 문제가 발생합니다. webpack-dev-server에서 라우팅을 어떻게 사용하나요? 여러 HTML과 JS를 패키징하는 방법 청크를 생성하고 md5를 자동으로 업데이트하시겠습니까? 이 기사에서는 이러한 문제를 해결하는 방법에 대해 설명합니다.

여기서는 이미 Webpack에 대한 가장 기본적인 이해를 갖고 있다고 가정합니다

수요

우리의 요구 사항을 살펴보겠습니다.

1. 개발 중에는 webpack-dev-server를 서버로 사용하세요.

2. webpack-dev-server에서 라우팅을 사용하세요. /a에 접속하면 a.html이 표시되고, /b는 b.html을 표시합니다. 여러 HTML로 변환하고 인용된 리소스에 md5 스탬프 추가를 제공합니다

3. 메인

   디렉토리 구조

├── src            
│  └── views         # 每一个文件夹对应一个页面
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # 打包输出的目录
|  └── ...
└── template.html       # 将根据这个模版，生成各个页面的html
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express

기본 디렉토리만 나열됩니다. 여기서는 template.html을 기반으로 여러 페이지에 대한 HTML을 생성합니다. 물론 각 페이지마다 별도의 HTML 템플릿을 사용할 수도 있습니다.

웹팩 구성

여기서 해결해야 할 두 가지 주요 문제가 있습니다.

1. 여러 페이지에 대한 js 파일 패키징

src/views 아래의 디렉터리를 읽고, 각 디렉터리가 페이지로 처리되고 js 청크로 패키징된다는 데 동의합니다.

2. 여러 HTML을 패키지화하세요

루프에서 여러 HtmlWebpackPlugin 플러그인을 생성하고 각 플러그인의 청크가 위에 패키지된 js 청크를 가리키도록 합니다. rreee

라우팅 구성

다중 페이지 애플리케이션에서는 localhost:8080/a.html 대신 localhost:8080/a에 액세스하려고 합니다. webpack-dev-server는 메모리에 있는 파일만 패키징하므로 ​​파일이 실제로 아직 존재하지 않기 때문에 Express에서 직접 file('output/views/a.html')을 보낼 수 없습니다. 다행스럽게도 webpack은 메모리에 있는 파일을 출력하기 위해 outputFileStream을 제공합니다. 이를 라우팅에 사용할 수 있습니다.

경로를

직접 정의하려면 express 또는 koa와 같은 라이브러리를 가져온 다음 webpack-dev-server를

middleware

로 처리해야 할 수도 있습니다.

rreee 마지막으로 package.json에서 시작 명령을 정의합니다:

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* 一些webpack基础配置 */  
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // 取倒数第二层(view下面的文件夹)做包名
     var split = filepath.split('/');
     var name = split[split.length - 2];
     entries[name] = './' + filepath;
   });
   return entries;
}   
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
  // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
  webpackConfig.entry[name] = entries[name];
  
  // 每个页面生成一个html
  var plugin = new HtmlWebpackPlugin({
    // 生成出来的html文件名
    filename: name + '.html',
    // 每个html的模版，这里多个页面使用同一个模版
    template: './template.html',
    // 自动将引用插入html
    inject: true,
    // 每个html引用的js模块，也可以在这里加上vendor等公用模块
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})

Run 그런 다음 브라우저에서 localhost:8080/각 페이지를 방문하면 원하는 결과를 볼 수 있습니다. 나는 당신이 이 기사를 읽는 방법을 마스터했다고 믿습니다. 더 흥미진진한 내용을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

npm run devajax는 상태를 직접 변경하고 새로 고침되지 않은 상태를 삭제합니다.

vue axios를 사용할 때 이 지점은 어디입니까?

위 내용은 webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!