自动生成项目中的HTML文件

1、自动生成项目中的html文件1. webpack中的commonjs和es mudule 规范1.1 commonjs规范commonjs规范的动身点：js没有模块系统、标准库较少、缺乏包管理工具；为了让js可以在任何地方运行，以达到java、php这些后台语言具备开发大型应用的能力。在commonjs规范中：一个文件就是一个模块，拥有单独的作用域；一般方式定义的变量、函数、对象都属于该模块内；通过require来加载模块；通过exports和modul.exports来裸露模块中的内容；1.2 es mudule 规范es6在语言标准的层面上，实现了模块功能，基本特点如下：每一个模块只加载一

2、次， 每一个js只执行一次， 假如下次再去加载同名目下同文件，挺直从内存中读取；每一个模块内声明的变量都是局部变量， 不会污染全局作用域；模块内部的变量或者函数可以通过export导出；一个模块可以导入别的模块；模块功能主要由两个指令构成：export和import；export指令用于规定模块的对外接口，import指令用于输入其他模块提供的功能：/ esm.jslet firstname = &39;jack&39;let lastname = &39;wang&39;export firstname, lastname/ export指令除了输出变量，还可

3、以输出函数export function (a, b) return a + b用法export指令定义了模块的对外接口以后，其他 js 文件就可以通过import指令加载这个模块，import指令接受一对大括号，里面指定要从其他模块导入的变量名，大括号里面的变量名，必需与被导入模块对外接口的名称相同。/ main.jsimport firstname, lastname from &39;&39;function say() console.log(&39;hello , &39; + firstname + &39; &39; + lastn

4、ame)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.jsimport sum from &39;&39;import minus from &39;&39;console.log(&39;sum(1

5、, 2): &39; + sum(1, 2)console.log(&39;minus(5, 2): &39; + minus(5, 2)执行 npm run build 之后，打开 index.html，在控制台中可以看到输出的结果。?2.?自动生成项目中的html文件在前文中我们为了演示打包好的?main.bundle.js ，在根名目下创建了一个 index.html ，并引入main.bundle.js。而在实际项目中，我们可以通过 webpack 的一个插件：htmlwebpackplugin 来自动生成html文件并引入我们打包好的js和css文件。安装：n

6、pm install -save-dev html-webpack-plugin收拾项目名目：在根名目创建config文件夹，把webpack.config.js移入config，并修改webpack.config.js：const path = require(&39;path&39;)const htmlwebpackplugin = require(&39;html-webpack-plugin&39;)const config = mode: &39;none&39;,entry: main: path.join(_dirname, &a

7、mp;39;&39;),output: filename: &39;name.bundle.js&39;,path: path.join(_dirname, &39;&39;),plugins: new htmlwebpackplugin(template: path.join(_dirname, &39;&39;),inject: true,minify: removecomments: true)module.exports = configtemplate：模版文件的路径，这里用法根名目下的index.html文件；inject：设

8、为 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. 清理/dis

9、t文件夹每次执行npm run build 打包时，都会有上次的代码遗留下来，导致我们的?/dist?文件夹相当杂乱。通常，在每次构建前清理?/dist?文件夹，是比较推举的做法。clean-webpack-plugin?是一个比较普及的管理插件，让我们安装和配置下：npm install clean-webpack-plugin -save-dev在webpack.config.js 中用法：const cleanwebpackplugin = require(&39;clean-webpack-plugin&39;)在 plugins 中加入：new cleanwebpackplugin(&39;dist&39;,root: path.join(_dirname, &39;&39;)第一个参数表示