详解html-webpack-plugin使用_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

前言最近由于用2113着html-webpack-plugin觉得很不爽,于是乎想自己动手5261写一个插件。原以为像4102gulp插件一样半1653天上手一天写完,但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首先是进入 how to write a plugin 看了一页简单的介绍。然后教程会告诉你,你需要去了解compiler和compilation这两个对象,才能更好地写webpack的插件,然后作者给了github的链接给你,让你去看源代码,我晕。不过幸好最后给了一个plugins 的API文档,才让我开发的过程中稍微有点头绪。how to write a plugin这个教程还是可以好好看看的,尤其是那个simple example,它会教你在compilation的emit事件或之前,将你需要生成的文件放到webpack的compilation.assets里,这样就可以借助webpack的力量帮你生成文件,而不需要自己手动去写fs.writeFileSync。主要就是这段代码compilation.assets['filelist.md'] = { source: function() { return filelist; }, size: function() { return filelist.length; }};基本特性介绍首先,定义一个函数func,用户设置的options基本就在这里处理。其次,需要设一个func.prototype.apply函数。这个函数是提供给webpack运行时调用的。webpack会在这里注入compiler对象。输出complier对象,你会看到这一长串的内容,初步一看,我看出了两大类(有补充的可以告诉我)。一个webpack运行时的参数,例如_plugins,这些数组里的函数应该是webpack内置的函数,用于在compiltion,this-compilation和should-emit事件触发时调用的。另一个是用户写在webpack.config.js里的参数。隐约觉得这里好多未来都可能会是webpack暴露给用户的接口,使webpack的定制化功能更强大www.zgxue.com防采集请勿采集本网。

最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:

//引入想要的css文件 var style = require('style/useable!css!./file.css'); //激活,也就是在dom中添加style标签 style.use(); //销毁,也就是

为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题

网页 资讯 视频 图片 知道 文库 贴吧 采购 地图 更多»搜索答案 我要提问 html-webpack-plugin chunks是什么意思 我来答 首页 问题分类 全部问题 经济

可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口

那你试这在Eclipse 中新建一个web工程,部署到tomcat下,如果部署成功,那么是你的web项目的问题,可以考虑把web项目中的代码拷贝到你新建的web项目中。如果

1、安装

webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理。而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我

cnpm i webpack-plugin -D

可以这么配置: entry: { 'view/pageA/entry1': './view/pageA/a.js', 'view/pageA/entry2': './view/pageB/b.js' }, output: { path:

2、在webpack.config.json中引用

const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin') //第一步module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js', }, mode: 'development', devServer: { open: true, port: 8080, hot: true, contentBase: 'src' }, plugins: [ new htmlWebpackPlugin({ //第二步 template: path.join(__dirname, './src/index.html'), //指定生成模板的路径 filename: 'index.html' //指定生成页面的名称 }) ]}

3、html-webpack-plugin的作用

一、在内存中生成一个指定模板的文件,在访问时速度更快

二、自动为指定模板文件添加bundle.js文件

总结

到此这篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

1. 安装: html-webpack-plugin 插件2113完成打包2. 命令:5261npm install html-webpack-plugin –save-dev3. 配置:引入:const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: 'index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'My App',(生成的页面标题) filename: 'assets/admin.html',(4102生成的文件名) template: 'src/assets/test.html',(原来1653的index.html) minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true } }) ]} (BY三人行慕课)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 浅析html webpack plugin插件的使用教程
  • 使用html-webpack-plugin'入再内存中生成 html 页面插件
  • webpack 如何打包html,在html中可以压缩哪些东西?...
  • 如何写一个webpack插件
  • webpack怎么把html搬到输出目录里
  • htmlwebpackplugin配置的参数中的template是什么意思
  • html-webpack-plugin按需加载的js/css也会被提取出...
  • html-webpack-plugin chunks是什么意思
  • 安装html-webpack-plugin 报错
  • webpack多页面怎么使用
  • webpack怎么配置name,description
  • HtmlWebpackPlugin生成html问题,怎么对应js文件,...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtmlhtmlwebpack浅析html webpack plugin插件的使用教程使用html-webpack-plugin"入再内存中生成 html 页面插件html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html直接引用vue和element-ui的方法详解html中字体使用line-height依然不能垂直居中解决前端html换肤功能的实现代码多个html页面共同调用一段html代码的方法html中图片不存在显示默认图片的方法示例html table行距的改变方法示例html table 空白单元格补全的实现方法html实现a元素href的url链接自动刷新或新窗口打开功能详解html表格html解决table设置宽度无效的问题
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved