webpack4系列教程（三）：自动生成项目中的HTML文件

kgbook 发布于2019-08-23 14:41 / 2717人阅读

摘要：自动生成项目中的文件在前文中我们为了演示打包好的，在根目录下创建了一个，并引入。至此，我们已经成功实现自动生成项目中的文件了。执行，在命令行中可见文件夹已被删除了。

1. webpack中的CommonJS和ES Mudule 规范 1.1 CommonJs规范

CommonJs规范的出发点：JS没有模块系统、标准库较少、缺乏包管理工具；为了让JS可以在任何地方运行，以达到Java、PHP这些后台语言具备开发大型应用的能力。

在CommonJs规范中：

一个文件就是一个模块，拥有多带带的作用域；

普通方式定义的变量、函数、对象都属于该模块内；

通过require来加载模块；

通过exports和modul.exports来暴露模块中的内容；

1.2 ES Mudule 规范

ES6在语言标准的层面上，实现了模块功能，基本特点如下：

每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取；

每一个模块内声明的变量都是局部变量，不会污染全局作用域；

模块内部的变量或者函数可以通过export导出；

一个模块可以导入别的模块；

模块功能主要由两个命令构成：export和import；export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能：

// esm.js
let firstName = "Jack";
let lastName = "Wang";

export {firstName, lastName}

// export命令除了输出变量，还可以输出函数
export function (a, b) {
  return a + b
}

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块，import命令接受一对大括号，里面指定要从其他模块导入的变量名，大括号里面的变量名，必须与被导入模块对外接口的名称相同。

// main.js
import {firstName, lastName} from "./esm";

function say() {
  console.log("Hello , " + firstName + " " + lastName)
}

1.3 使用

现在，在src目录下新建 sum.js 和 minus.js

// sum.js ES Mudule 规范
// export default命令，为模块指定默认输出
export default function (a, b) {
  return a + b
}

// minus.js commonJS 规范

module.exports = function (a, b) {
  return a - b
}

修改 main.js

import sum from "./sum"
import minus from "./minus"

console.log("sum(1, 2): " + sum(1, 2))
console.log("minus(5, 2): " + minus(5, 2))

执行 npm run build 之后，打开 index.html，在控制台中可以看到输出的结果。

2. 自动生成项目中的HTML文件

在前文中我们为了演示打包好的 main.bundle.js ，在根目录下创建了一个 index.html ，并引入main.bundle.js。而在实际项目中，我们可以通过 webpack 的一个插件：HtmlWebpackPlugin 来自动生成HTML文件并引入我们打包好的JS和CSS文件。

安装：

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

整理项目目录：

在根目录创建config文件夹，把webpack.config.js移入config，并修改webpack.config.js：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

const config = {
  mode: "none",
  entry: {
    main: path.join(__dirname, "../src/main.js")
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "../dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../index.html"),
      inject: true,
      minify: {
        removeComments: true
      }
    })
  ]
}

module.exports = config

template：模版文件的路径，这里使用根目录下的index.html文件；

inject：设为 true 表示把JS文件注入到body结尾，CSS文件注入到head中；

minify：removeComments: true 表示删除模版文件中的注释，minify还有很多配置可选请自行参阅；

下一步注释掉index.html 中我们手动引入的 script ：




    
    
    
    Title

执行 npm run build ，可以看到，dist 目录下多了一个 index.html，这就是通过 HtmlWebpackPlugin 生成的文件，打开dist/index.html，已经自动引入了 main.bundle.js并且注释已被删除。

至此，我们已经成功实现自动生成项目中的HTML文件了。

3. 清理/dist文件夹

每次执行npm run build 打包时，都会有上次的代码遗留下来，导致我们的 /dist 文件夹相当杂乱。通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法。

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下：

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

在webpack.config.js 中使用：

const CleanWebpackPlugin = require("clean-webpack-plugin")

在 plugins 中加入：

new CleanWebpackPlugin(["dist"],{root: path.join(__dirname, "../")})

第一个参数表示文件夹路径数组；第二个参数是 options 配置项，root 为到webpack根文件夹的绝对路径，默认为 __dirname，由于dist文件夹和webpack.config.js不再相同目录下，因此我们需要重新定义 root 路径，以免无法找到 dist 文件夹。

执行 npm run build ，在命令行中可见：

dist 文件夹已被删除了。

私有云服务器托管 webpack4教程系列三画图生成html文件 linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100990.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程(三): 多页面解决方案--提取公共代码

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

superw 2019-08-23 11:40 评论0 收藏0