이번에는 webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계에 대한 분석을 가져오겠습니다. webpack을 사용하여 다중 페이지 애플리케이션을 구축할 때 주의 사항은 무엇입니까?
웹팩의 구성 및 사용에 관한 기사는 이미 인터넷에 많이 있으며, 그 중 대부분은 단일 페이지 애플리케이션에 관한 것입니다. 여러 HTML을 패키징해야 하는 경우 문제가 발생합니다. webpack-dev-server에서 라우팅을 어떻게 사용하나요? 여러 HTML과 JS를 패키징하는 방법 청크를 생성하고 md5를 자동으로 업데이트하시겠습니까? 이 기사에서는 이러한 문제를 해결하는 방법에 대해 설명합니다.
여기서는 이미 Webpack에 대한 가장 기본적인 이해를 갖고 있다고 가정합니다
수요
우리의 요구 사항을 살펴보겠습니다.
개발 중에는 webpack-dev-server를 서버로 사용하세요.
메인
디렉토리 구조├── 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); })
추천 자료:
npm run dev
ajax는 상태를 직접 변경하고 새로 고침되지 않은 상태를 삭제합니다.
위 내용은 webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!