Análise completa da construção de aplicativos multi-páginas usando webpack

Sobre a configuração e uso do webpack, há muitos artigos na internet, a maioria fala sobre aplicações single-page, quando precisamos empacotar vários html, as coisas ficam complicadas. Como empacotar vários html no webpack-dev-No server, use rotas? Como empacotar vários html e chunks de js e atualizar md automaticamente5？Este artigo é sobre como resolver esses problemas.

Aqui suponho que você já tenha uma compreensão básica do Webpack

Necessidades

Vamos ver nossas necessidades:

1. Usando webpack-dev-Server para desenvolvimento
2. No webpack-dev-No server, use rotas, acesse/a exibe a.html,/b exibe b.html
3. Empacotado em vários html, adicionando md aos recursos referenciados5Clique

Estrutura principal do diretório

├── src            
│  └── views         # Cada pasta corresponde a uma página
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # Diretório de saída do pacote
|  └── ...
└── template.html       # Gerar os html de várias páginas com base neste modelo
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express    

Apenas lista os diretórios principais, aqui geramos várias páginas html com base em um template.html, que diferem apenas nos caminhos dos recursos de referência. Claro, você também pode usar um template html separado para cada página.

Configuração do webpack

Aqui resolve dois pequenos problemas.

1Empacotar múltiplos arquivos js de páginas

Ler src/Cada diretório sob views, é conveniente tratado como uma página, empacotada em um chunk js.

2Empacotar múltiplos html

Gerar múltiplos plugins HtmlWebpackPlugin, cada plugin aponta os chunks individuais para os chunks js empacotados acima.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* Configurações básicas do webpack */  
};
// Obter os arquivos de entrada na pasta especificada
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // Usar o penúltimo nível (pasta abaixo de view) como nome do pacote
     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) {
  // Gerar um entry para cada página, se necessário HotUpdate, aqui é onde você modifica o entry
  webpackConfig.entry[name] = entries[name];
  // Gerar um arquivo html para cada página
  var plugin = new HtmlWebpackPlugin({
    // Nome do arquivo html gerado
    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)
// roote
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);
  // Use o outputFileSystem fornecido pelo webpack
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // erro algo
      return next(err);
    }
    res.set('content-type/html');
    res.send(result);
    res.end();
  });
});
module.exports = app.listen(8080, function(err) {
  if (err) {
    // faça algo
    return;
  }
  console.log('Escutando em http://localhost: + port + "\n')
}

Por fim, defina o comando de inicialização no package.json:

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

Execute npm run dev e, em seguida, acesse localhost:8080/Em todas as páginas, você deve poder ver o resultado desejado.

Isso é tudo o que há no artigo, esperamos que ajude na sua aprendizagem e que você apóie o Tutorial Yell.

Declaração: o conteúdo deste artigo é de origem na Internet, pertence ao autor original, foi contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)