c 自动生成html文件,webpack4系列教程(三):自动生成项目中的HTML文件
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 文件夹已被删除了。
传送门:
c 自动生成html文件,webpack4系列教程(三):自动生成项目中的HTML文件相关推荐
- XamarinSQLite教程在Xamarin.Android项目中提取数据库文件
XamarinSQLite教程在Xamarin.Android项目中提取数据库文件 由于不能直接打开该文件,开发者需要先将数据库文件从Android系统中提取出来.操作步骤如下. (5)选择MyDoc ...
- XamarinSQLite教程在Xamarin.Android项目中定位数据库文件
XamarinSQLite教程在Xamarin.Android项目中定位数据库文件 实际开发中,经常需要验证数据库操作的正确性.这个时候,需要打开数据库文件,进行确认.下面是如何找到MyDocumen ...
- XamarinSQLite教程在Xamarin.iOS项目中定位数据库文件
XamarinSQLite教程在Xamarin.iOS项目中定位数据库文件 开发者可以在指定的路径中找到复制的数据库文件,具体的操作步骤如下: (1)单击Mac电脑中Finder菜单中的"前 ...
- webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
- n 如何编写html,webpack4系列教程,如何编写plugin处理html代码逻辑?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 在上一篇文章中,利用不同位置的publicPath,对html中的cdn地址,进行了处理.但是,遗留了一个小问 ...
- Fastify 系列教程三 (验证、序列化和生命周期)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...
- 树莓派4B系列教程三 :优化配置
树莓派4B系列教程三 :优化配置 写在前面 树莓派4B内存增加 CPU温度控制 显存优化 Chromuim缓存转移 优化自启程序 Chromium插件安装 离线安装插件时遇到的问题 结语 写在前面 不 ...
- XamarinSQLite教程Xamarin.iOS项目中打开数据库文件
XamarinSQLite教程Xamarin.iOS项目中打开数据库文件 以下是打开MyDocuments.db数据库的具体操作步骤: (1)将Mac电脑上的MyDocuments.db数据库移动到W ...
- Android VideoView播放 项目中的 视频文件 自动横屏 全屏播放
记录最近遇到的一个android播放视频的需求: APP主页上方有一个操作演示字样的入口,点击后开始播放一段视频,视频文件是放在工程里的. 话说以前还没做过类似播放视频的功能,根据以往的经验来看,最简 ...
最新文章
- 不知道什么时间收集的code
- oracle io profile,ORACLE 中 PROFILE的管理
- 抽象方法和接口的区别
- SQL 中的unicode字符
- 使用Kotlin开发Android应用初体验
- 运维人员mysql如何访问_mysql 运维常见操作
- 河南省计算机三级准考证打印入口,2016年下半年河南计算机三级准考证打印入口及网址,计算机等级考试时间查询...
- python--修改默认递归层级
- JVM优化系列-详解JVM堆内存分析
- 插入u盘被计算机限制怎么回事,电脑不读u盘怎么处理,显示本次操作由于计算机的限制而被取消 请您与系统管理员联系,怎门回事?...
- 3dm格式catia能打开吗_CATIA 3DXML文件格式介绍 | 坐倚北风
- win10一直正在检查更新_Win10关闭自动更新的方法汇总
- SPSS教程及常用操作参考表 —— 一篇文章解决对SPSS的所有疑问
- dspscififo历程_DSP2812 SCI FIFO模式调试心得
- java excel 水印_Java 添加Excel水印
- 公司邮箱地址格式是什么?邮箱地址怎么写?邮箱地址大全
- 计算机有很多的优点英语,电脑的优点和缺点英文作文
- 采用系统API实现的二维码扫描、识别和生成
- 《可复制的领导力》读书笔记
- SQL数据库-------专业术语学习
热门文章
- Bug之数据sql插入不显示
- 前端组件:layui
- 如何看创建媒体日期_每天约4万个网约车投诉,看AI如何接招_媒体_澎湃新闻
- python使用率_Python获取CPU、内存使用率以及网络使用状态代码
- Git在公司内部的使用规范
- this ts 方法获取_vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别
- python医疗系统代码_吴裕雄 人工智能 java、javascript、HTML5、python、oracle ——智能医疗系统WEB端复诊代码简洁版实现...
- oracle子查询子查询,Oracle 单行子查询和多行子查询
- python语句x 3 3执行_Python 3.x 学习笔记--杂
- mysql like 中文版_MySQL使用like查询中文不准确的解决方法