webpack 3.X学习之多页面打包的方法

webpack 3.X学习之多页面打包的方法

前言

在实际我们的开发中可能需要构建多个页面,对于我们的前端项目而言,在每个页面之间进行切换和操作,需要单独的代码对其进行处理。webpack 提供了一种分离应用程序的方法,将公共的部分提取出来成为一个单独的块,用以支持多页面的单独加载,减小了每个页面所需的代码量,提高代码加载速度。

创建一个项目

我们先创建一个包含两个页面的项目:

├─dist
├─src
│  ├─assets
│  │   └─css
│  ├─app.js
│  ├─home.js
│  ├─about.js
│  └─index.html
├─webpack.config.js    
├─package.json
└─README.md

其中,home.js 和 about.js 是两个页面独有的 JS 代码,在这里模拟页面个性化代码,将它们分别引入到对应的 HTML 中,如下:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
</head>
<body>
  <div id="app"></div>
  <script src="assets/js/vendors~app.js"></script>
  <script src="assets/js/app.js"></script>
  <script src="assets/js/home.js"></script>
</body>
</html>

about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Page</title>
</head>
<body>
  <div id="app"></div>
  <script src="assets/js/vendors~app.js"></script>
  <script src="assets/js/app.js"></script>
  <script src="assets/js/about.js"></script>
</body>
</html>

配置webpack

我们先需要安装一些必要的依赖包:

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev

webpack.config.js 配置如下:

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


module.exports = {
  mode: 'development',

  entry: {
    app: path.resolve(__dirname, 'src/app.js'),
    home: path.resolve(__dirname, 'src/home.js'),
    about: path.resolve(__dirname, 'src/about.js')
  },

  output: {
    filename: 'assets/js/[name].[chunkhash:8].js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Home Page',
      filename: 'index.html',
      chunks: ['app', 'home']
    }),
    new HtmlWebpackPlugin({
      title: 'About Page',
      filename: 'about.html',
      chunks: ['app', 'about']
    })
  ]
};

在这里,我们使用了 html-webpack-plugin 来实现自动生成 HTML 文件,其中它具备的一些配置项解析如下:

  • filename:生成后的文件名,可以带有相对路径;
  • chunks:需要引入的代码块,这里我们引入了两个 JS 文件,分别是 app 和 home,并指定了它们所对应的 HTML 文件;

测试

在配置文件中完成了这些之后,我们可以执行 npm run build 命令进行测试,分别生成对应的首页和关于页面,文件目录如下:

├─dist
│  ├─assets
│  │  ├─js
│  │  │ ├─about.c399af4f.js
│  │  │ ├─app.f9f6a0f9.js
│  │  │ └─home.c399af4f.js
│  │  └─css
│  │      └─[name].[hash:8].css
│  ├─about.html
│  └─index.html   
├─src
│  ├─assets
│  │  └─css
│  │     └─app.bb390ce8.css
│  ├─app.js
│  ├─home.js
│  ├─about.js
│  └─index.html
├─webpack.config.js    
├─package.json
└─README.md

教程结论

在这条攻略中,我们实现了 Webpack 多页面打包的方法。大家可以根据自己的需求,将其应用到自己的项目中,从而提高代码加载速度。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:webpack 3.X学习之多页面打包的方法 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript 作用域链解析

    JavaScript 作用域链解析是指在当前作用域中查找变量时,如果找不到,就会沿着作用域链向上一层层查找,直到找到该变量或者到全局作用域仍未找到为止。 在 JavaScript 中,每个函数都有自己的作用域,即函数作用域。在函数内部定义的变量,只能在该函数内部访问,不能在函数外部访问。如果在函数外部使用该变量,就会抛出 ReferenceError 异常。…

    JavaScript 2023年6月10日
    00
  • 利用JS实现scroll自定义滚动效果详解

    实现scroll自定义滚动效果需要以下几个步骤: 1.创建一个滚动容器 首先要为需要滚动的内容创建一个容器,在该容器内部应该有一个的子元素用来储存实际要滚动的内容。可以使用以下的HTML代码来创建一个滚动容器: <div class="scroll-container"> <div class="scroll-…

    JavaScript 2023年6月11日
    00
  • JavaScript中的this例题实战总结详析

    下面我将为你详细讲解“JavaScript中的this例题实战总结详析”。 一、什么是this 在JavaScript中,this是一个关键字,通常用来指向当前对象。this的具体指向取决于函数被调用的方式。在不同的上下文环境中,this指向的对象不同,因此理解this的指向也非常重要。 具体来说,this有以下四种指向。 全局环境下的this当函数未被绑定…

    JavaScript 2023年6月11日
    00
  • JS弹出窗口的运用与技巧大全

    JS弹出窗口的运用与技巧大全 作为开发者,JS弹出窗口是我们常常需要使用的一个常规界面,本文将全面介绍JS弹出窗口的运用,并提供一些技巧,让你可以轻松掌握这个常用的技能。 简介 JS弹出窗口可以在页面中弹出一个新的窗口,常用于显示提示信息、警告信息,以及展示图片等。JS弹出窗口主要分为以下几种: alert:用于弹出简单的警告信息。 confirm:用于提示…

    JavaScript 2023年6月11日
    00
  • JavaScript访问字符串中单个字符的两种方法

    当我们需要从一个字符串中获取单个字符时,JavaScript提供了两种方法。 方法一:使用charAt()方法 charAt() 方法返回指定索引位置处的字符,索引从0开始计数。如果索引超出字符串长度,则返回一个空字符串。 let str = "Hello World!"; let char1 = str.charAt(0); // ch…

    JavaScript 2023年5月28日
    00
  • 基于JS实现01支付后的10秒倒计时

    要实现基于JS的10秒倒计时,可以采用以下步骤: 1.在HTML中创建倒计时显示元素 首先,在HTML中创建一个元素用于显示倒计时,例如: <div id="countdown">10</div> 这是一个div元素,给它一个id,方便在JS中获取并修改其内容。 2.利用JS实现倒计时功能 然后,在JS中获取倒计时…

    JavaScript 2023年6月11日
    00
  • 一些常用的JS功能函数代码

    当我们在编写JavaScript代码时,有时候需要一些通用的功能函数来完成一些需求,在这里我整理了一些常用的JS功能函数供大家参考。 1. 获取URL参数 有时候我们需要获取URL中的参数,我们可以使用以下代码来获取URL参数。 function getQueryString(name) { var reg = new RegExp("(^|&am…

    JavaScript 2023年5月27日
    00
  • Go设计模式原型模式考查点及使用详解

    Go设计模式原型模式考查点及使用详解 什么是原型模式? 原型模式是一种创建型设计模式,其目的是通过克隆已有的对象来创建新的对象,而不是通过常规的new操作符通过调用构造函数来创建新的对象。原型模式的核心思想是通过使用原型实例来指定新对象的类型,然后通过复制这个原型来创建新的对象。 原型模式在Go语言中很常用,例如当我们需要创建一些相同属性和方法的对象,但是这…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部