使用Webpack構建多頁面程序

使用webpack搭建單頁面程序十分常見，但在實際開發中咱們可能還會有開發多頁面程序的需求，所以我研究了一下如何使用webpack搭建多頁面程序。

原理

將每一個頁面所在的文件夾都看做是一個單獨的單頁面程序目錄，配置多個entry以及html-webpack-plugin便可實現多頁面打包。

下面爲本項目目錄結構

.
├─ src
│  └─ pages
│       ├─ about
│       │    ├─ index.css
│       │    ├─ index.html
│       │    └─ index.js
│       └─ index
│            ├─ index.css
│            ├─ index.html
│            └─ index.js
└─ webpack.config.js

單頁面打包基礎配置

首先咱們來看一下單頁面程序的 webpack 基礎配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
};

要想將其改成多頁面程序，就要將它的單入口和單 HTML 模板改成多入口和多 HTML 模板

多頁面打包基礎配置

改造入口

傳統的多入口寫法能夠寫成鍵值對的形式

module.exports = {
  entry: {
    index: './src/pages/index/index.js',
    about: './src/pages/about/index.js',
  },
  ...
}

這樣寫的話，每增長一個頁面就須要手動添加一個入口，比較麻煩，所以咱們能夠定義一個根據目錄生成入口的函數來簡化咱們的操做

const glob = require('glob');

function getEntry() {
  const entry = {};
  glob.sync('./src/pages/**/index.js').forEach((file) => {
    const name = file.match(/\/pages\/(.+)\/index.js/)[1];
    entry[name] = file;
  });
  return entry;
}

module.exports = {
  entry: getEntry(),
  ...
}

改造輸出

在輸出的配置項中，再將輸出的文件名寫死顯示已經不合適了，所以咱們要將名字改成與源文件相匹配的名字

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].[contenthash].js',
  },
  ...
}

配置多個 html-webpack-plugin

與入口相同，能夠將不一樣的 html 模板直接寫入插件配置中，這裏咱們須要爲每一個插件配置不一樣的chunks，防止 js 注入到錯誤的 html 中

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/pages/index/index.html',
      chunks: ['index'],
      filename: 'index.html',
    }),
    new HtmlWebpackPlugin({
      template: './src/pages/about/index.html',
      chunks: ['about'],
      filename: 'about.html',
    }),
  ],
  ...
};

這樣的作法與入口有着一樣的毛病，所以咱們再定義一個函數來生成這個配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');

function getHtmlTemplate() {
  return glob
    .sync('./src/pages/**/index.html')
    .map((file) => {
      return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
    })
    .map(
      (template) =>
        new HtmlWebpackPlugin({
          template: template.path,
          chunks: [template.name.toString()],
          filename: `${template.name}.html`,
        })
    );
}

module.exports = {
  ...
  plugins: [...getHtmlTemplate()],
  ...
};

這樣一個簡單的多頁面項目就配置完成了，咱們還能夠在此基礎上添加熱更新、代碼分割等功能，有興趣的能夠本身嘗試一下

完整配置

項目地址：xmy6364/webpack-multipage

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 多頁入口
function getEntry() {
  const entry = {};
  glob.sync('./src/pages/**/index.js').forEach((file) => {
    const name = file.match(/\/pages\/(.+)\/index.js/)[1];
    entry[name] = file;
  });
  return entry;
}

// 多頁模板
function getHtmlTemplate() {
  return glob
    .sync('./src/pages/**/index.html')
    .map((file) => {
      return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
    })
    .map(
      (template) =>
        new HtmlWebpackPlugin({
          template: template.path,
          chunks: [template.name.toString()],
          filename: `${template.name}.html`,
        })
    );
}

const config = {
  mode: 'production',
  entry: getEntry(),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin(), ...getHtmlTemplate()],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot: true,
    open: true,
  },
};

module.exports = config;