Análisis completo de la construcción de aplicaciones de múltiples páginas con webpack

Sobre la configuración y uso de webpack, hay muchos artículos en línea, la mayoría habla de aplicaciones de una página, cuando necesitamos empaquetar varios html, las cosas se complican. ¿Cómo en webpack-dev-¿En el servidor se utilizan rutas? ¿Cómo empaquetar varios html y js chunk y actualizar md automáticamente?5¿Este artículo trata de cómo resolver estos problemas?

aquí se asume que ya tienes una comprensión básica de Webpack

necesidades

veamos nuestras necesidades:

1. usando webpack-dev-servidor de desarrollo del servidor
2. en webpack-dev-en el servidor se utiliza rutas, acceso/a muestra a.html,/b muestra b.html
3. empaquetado en varios html, añadiendo md a los recursos referenciados5tocado

estructura principal de directorios

├── src            
│  └── views         # cada carpeta corresponde a una página
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # carpeta de salida de paquete
|  └── ...
└── template.html       # 将根据这个模版，生成各个页面的html
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + 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)
// ruta
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);
  // Usar el outputFileSystem proporcionado por webpack
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // algo de error
      return next(err);
    }
    res.set('content-type/html');
    res.send(result);
    res.end();
  });
});
module.exports = app.listen(8080, function(err) {
  if (err) {
    // hacer algo
    return;
  }
  console.log('Escuchando en http://localhost: + puerto + "\n')
}

Finalmente, define la orden de inicio en package.json:

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

Ejecuta npm run dev y luego accede a localhost:8080/En cada página, deberías poder ver el resultado que deseas.

Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos apoyen el tutorial de alarido.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado una edición humana y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, bienvenida la envío de un correo electrónico a: notice#w)3codebox.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Si se encuentra contenido sospechoso de infracción, bienvenida la envío de un correo electrónico a: notice#w)