webpack을 사용하여 멀티 페이지 애플리케이션을 구축하는 방법에 대한 자세한 설명

webpack의 설정과 사용에 대한 정보는 인터넷에서 많이 있으며, 대부분은 단일 페이지 애플리케이션에 대해 설명하고 있습니다. 여러 개의 html을 배포할 때는 일반적으로 복잡해집니다. webpack에서 어떻게 여러 개의 html과 js chunk를 배포하고, md를 자동으로 업데이트할 수 있습니까?-dev-서버에서 라우팅 사용? 어떻게 여러 개의 html과 js chunk를 배포하고 md를 자동으로 업데이트할 수 있습니까?5？이 문서는 이러한 문제를 어떻게 해결할 수 있는지에 대해 설명합니다.

이곳에서는Webpack에 대한 기본적인 이해가 있다고 가정합니다

요구 사항

우리의 요구 사항을 확인해 보겠습니다:

1. webpack 사용-dev-개발 시 사용하는 서버로 설정된 server
2. webpack에서-dev-서버에서 라우팅 사용, 접근/a 때는 a.html을 표시합니다/b를 표시하면 b.html이 표시됩니다
3. 여러 개의 html을 배포하고, 그 중에 리소스를 참조하는 것에 md 추가5터치

주요 디렉토리 구조

├── src            
│  └── views         # 각 폴더에 맞는 페이지
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # 배포 출력 디렉토리
|  └── ...
└── template.html       # 이 템플릿을 기준으로 각 페이지의 html을 생성합니다
└── webpack.config.js
└── dev-server.js       # webpack-dev-서버 + express    

주요 디렉토리만 나열되었습니다. 여기서 template.html을 기준으로 여러 페이지의 html을 생성하며, 각 페이지는 다른 리소스 경로만 다릅니다.当然, 각 페이지에 별도의 html 템플릿을 사용할 수도 있습니다.

Webpack 설정

이곳에서는 두 가지 작은 문제를 해결합니다.

1다중 페이지의 js 파일을 패키지합니다

src을 읽습니다/views 아래의 디렉토리, 각 디렉토리를 페이지로 사용하고 각 페이지를 하나의 js chunk로 패키지합니다.

2다중 html을 패키지합니다

여러 개의 HtmlWebpackPlugin 플러그인을 순회하며 각 플러그인의 chunks를 위에서 패키지한 js chunk로 설정합니다.

// 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);
}

路由配置

在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。

由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。

注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。

// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
-dev-middleware
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
});
app.use(devMiddleware)
// 루트
app.get('/:viewname? function(req, res, next) {
  var viewname = req.params.viewname 
    ? req.params.viewname + '.html' 
    : 'index.html';
  var filepath = path.join(compiler.outputPath, viewname);
  // webpack에서 제공하는 outputFileSystem 사용
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // 에러가 발생했습니다
      return next(err);
    }
    res.set('content-type/html');
    res.send(result);
    res.end();
  });
});
module.exports = app.listen(8080, function(err) {
  if (err) {
    // do something
    return;
  }
  console.log('Listening at http://localhost: + port + '\n')
}

마지막으로 package.json에서 시작 명령어를 정의하십시오:

// package.json
{
  scripts: {
    "dev": "node ./dev-server.js"  
  }
}

npm run dev를 실행한 후, 브라우저에서 localhost:8080/각 페이지에서 원하는 결과를 볼 수 있습니다.

이것이 본 문서의 모든 내용입니다. 많은 도움이 되길 바라며, 모두가 다혈심 튜토리얼을 많이 지지해 주시길 바랍니다.

선언: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 웹사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (이메일 보내기 시, #을 @으로 변경하십시오) 신고를 하시고 관련 증거를 제공하시면, 실제로 확인되면, 해당 사이트는 즉시 위반 내용을 삭제합니다.