webpack的html插件使用
来源:互联网 发布:c语言逻辑取反 编辑:程序博客网 时间:2024/06/06 15:41
加载外部JS
手动方法就是直接 script src=”xxxx”
也曾有过很多模块加载库如 requireJS、seaJS
到了ES2015则已经有了原生的模块加载机制,由于现在的浏览器还不能全面支持,因此需要webpack+babel来转化,前面我们已经介绍过了。
我们再介绍一个webpack插件
这是一个自动html模板生成插件。
安装
$ npm install html-webpack-plugin
下面来看一下如何打包html?
1.修改配置文件webpack.config.js
在第一行加入 var HtmlWebpackPlugin = require("html-webpack-plugin");
然后在module.exports里加入
plugins:[ new HtmlWebpackPlugin({ template:"es2015test.html", filename:"./../index-test.html" }) ],
规定了要打包的html文件(es2015test.html),和最后输出的html文件(index-test.html)。
2.开始打包,执行命令 $ webpack
查看打包的index-test.html:
<!DOCTYPE html><html><head> <title>es2105的写法</title> <meta charset="utf-8"> <script type="text/javascript" src="es2015/index-webpack.js"></script></head><body><div>欢迎光临</div><script type="text/javascript" src="es2015/index-webpack.js"></script></body></html>
我们发现和es2015test.html就是后面多了一行引入js文件
0 0
- webpack的html插件使用
- webpack 插件: html-webpack-plugin
- webpack 插件: html-webpack-plugin
- webpack插件-html-webpack-plugin
- html-webpack-plugin 的使用
- webpack插件html-webpack-plugin详解
- webpack 插件之Html-Webpack-Plugin
- webpack之html-webpack-plugin插件
- webpack 使用插件
- webpack的CommonsChunkPlugin插件
- webpack的模块化插件
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- 【webpack】expose-loader 插件使用
- webpack使用--loader和插件
- HTML Webpack Plugin 插件参数学习
- webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
- webpack的基本使用
- Android流布局:AndroidFlowLayout
- 【JAVA】异常
- Java正则表达式使用
- 【计算机组成原理】指令系统体系结构
- pythonERROR
- webpack的html插件使用
- Rank of Tetris
- hdu 1043 /poj 1077 Eight(经典八数码问题,BFS+康托展开)
- VC++ MFC 系统菜单添加子菜单 CMENU submenu GetSystemMenu
- C++中构造函数,拷贝构造函数和赋值函数的区别和实现
- <poj2367>Genealogical tree
- 2015最流行的Android组件、工具、框架大全
- 精简Servlet3.0进行图片上传
- 虚拟内存