使用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.jsconst 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;
    

到此这篇关于使用Webpack构建多页面程序的实现步骤的文章就介绍到这了,更多相关Webpack构建多页面内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• electron-vue利用webpack打包实现多页面的入口文件问题
• webpack代码分片的实现
• 如何在webpack项目中调试loader插件
• 80行代码写一个Webpack插件并发布到npm
• 50行代码实现Webpack组件使用次数统计
• webpack -v报错解决方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！