Подробное объяснение использования webpack для создания многостраничных приложений

О конфигурации и использовании Webpack в Интернете уже много статей, большинство из которых посвящено одностраничным приложениям. Когда нам нужно паковать несколько html, ситуация становится сложной. Как использовать маршруты в webpack-dev-server? Как паковать несколько html и js chunk и автоматически обновлять md5? Эта статья рассказывает, как решить эти проблемы.

Здесь предполагается, что у вас уже есть базовые знания о Webpack

Требования

Посмотрим на наши требования:

1. Использование webpack-dev-server в процессе разработки сервера
2. Использование маршрутов в webpack-dev-server, при посещении /a отображается a.html, при посещении /b отображается b.html
3. Паковать в несколько html и добавлять md5-штампы к ресурсам, на которые они ссылаются

Основная структура каталогов

├── src            
│  └── views         # Каждая папка соответствует одной странице
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # Директория для打包 outputs
|  └── ...
└── template.html       # В этой шаблоне будет генерироваться html для всех страниц
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express    

Здесь перечислены только основные каталоги, здесь мы генерируем множество страниц html на основе template.html, между ними различаются только пути к ресурсам.もちろん、можно использовать отдельный html шаблон для каждой страницы.

Конфигурация webpack

Здесь решаются две небольшие проблемы.

1. Пакетирование js файлов множества страниц

Чтение каталогов src/views, каждый каталог считается страницей, пакетируется в один js chunk.

2. Пакетирование множества html

Циклическое создание множества HtmlWebpackPlugin плагинов, каждый из которых указывает на соответствующие 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) {
  // Генерация одного входа на каждую страницу, если необходимо HotUpdate, здесь измените вход
  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 просто пакует файлы в памяти, вы не можете напрямую использовать sendfile('output/views/a.html') в express, так как этот файл еще не существует. К счастью, webpack предоставляет outputFileStream, который используется для вывода файлов из памяти, и мы можем использовать его для маршрутизации.

Внимание, чтобы настроить маршруты, возможно, потребуется импортировать библиотеки, такие как express или koa, и затем обрабатывать webpack-dev-server как middleware.

// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// Компилятор webpack
var compiler = webpack(webpackConfig);
// Middleware webpack-dev-server
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  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);
  // Использование outputFileSystem, предоставляемого webpack
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // something error
      return next(err);
    }
    res.set('content-type', 'text/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#oldtoolbag.com (во время отправки письма замените # на @), чтобы сообщить о нарушении,并提供 соответствующие доказательства. При обнаружении доказательств, сайт немедленно удаляет материалы,涉嫌侵权.