Webpack 使用(三)
来源:互联网 发布:乌鲁木齐网络管制 编辑:程序博客网 时间:2024/06/05 05:26
前言
前面我们只是讲的如何将js文件打包以及将css文件引入js文件后打包,当打包后集成在html我们只是直接在index.html文件中引入我们预先设置好的js打包后文件名 <script type="text/javascript" src="hello.bundle.js"></script>
显然这是不够的,实际开发通常是多页面,并且有许多打包后的文件,我们不可能在每个页面都预设好js打包后文件名(如hello.bundle.js)
html-webpack-plugin
webpack有许多插件提供给我们,我们可以在npm官网https://www.npmjs.com/找到自己需要的插件。html-webpack-plugin可以简化HTML文件的创建。
html-webpack-plugin 的使用
- 通过npm下载插件
- 首先还是在webpack.config.js配置文件下,引用插件
- 前面webpack config也提到有一选项plugin,正是在这项下配置我们的插件
- 多个页面的情况下我们只需要new多个htmlWebpackPlugin,并进行配置,具体的配置选项可以参考https://www.npmjs.com/package/html-webpack-plugin
- template:模板
- inject:false不会默认引入,’body’,’head’自动注入标签中
- filename:打包后文件名
- chunks:只允许添加一些块,与entry是对应的
- excludeChunks:除去添加的模块
- minify:压缩
示例准备
- 依然使用dist目录来放打包后文件,下面再建立一个js文件夹放js文件
- 建立src文件夹存放开发的文件,目录下再新建js和style文件夹分别存放js文件和css文件,js文件夹下建立main.js,a.js,b.js
我们讲前面讲的css-loader、style-loader一起使用,则在a.js,b.js加入style-loader和css-loader,并在src/style下新建style.css文件,可以写一些样式实验
require('style-loader!css-loader!../style/style.css');
下面我们就可以进行最关键的步骤了,在webpack.config.js文件中为插件进行配置
var htmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:{ main:'./src/js/main.js', a:'./src/js/a.js', b:'./src/js/b.js' }, output:{ path: __dirname + '/dist', filename:'js/[name].bundle.js' //讲js区别放入dist下的js文件夹下 }, plugins:[ new htmlWebpackPlugin({ template:'index.html', inject:'body', filename:'index.bundle.html', chunks:['main'], title:'ni hao' }), new htmlWebpackPlugin({ template:'index.html', inject:'body', filename:"index.a.html", chunks:['main','a'], title:'a' }), new htmlWebpackPlugin({ template:'index.html', inject:'body', filename:'index.b.html', chunks:['main','b'], title:"b" }) ]}
- 在命令行中执行npm run webpack,这样我们就大功告成
更多
上面可以看到我们可以通过new htmlWebpackPlugin为页面参照不同的模板、引入不同的js文件来进行打包,而在引入的js中我们使用style-loader、css-loader还可以将css文件引入进来,这样我们就不会像原来那样不断的分别请求引入那么多的js文件和css文件
htmlWebpackPlugin对象中有options和files两个属性,files内有publicPath 、chunks 、js 、css 、manifest ,而options内是我们配置的各个选项template 、inject、filename、hash、title、chunks等等
关于html-webpack-plugin插件的配置选项中inject是设置是否自动注入到打包后的html文件中,我们可以自己手动进行设为inline内联形式,这样能够减少http请求提升页面的性能。
htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)
可以取到不带publicPath的路径(js/main.bundle.js)compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
可以实现inline引入- 例
<% for(var key in htmlWebpackPlugin.files.chunks){%> <% if(key=='b'){%> <%=htmlWebpackPlugin.files.chunks[key].entry%> <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[key].entry%>"></script> <% } %> <%}%>
我们可以通过ejs的形式进行inline引入,本例引入chunks为'b'时才进行inline引入,这样我们就减少了一个http请求
参考文档
https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade
阅读全文
0 0
- Webpack 使用(三)
- Webpack&React (三) 使用Webpack
- webpack使用(三)
- webpack使用笔记(三)
- webpack入门(三)
- Webpack学习 (三)
- WebPack系列教程(三):什么是WebPack
- Webpack 使用(一)
- Webpack 使用(二)
- webpack入门(三)——webpack 配置
- webpack入门(三)——webpack 配置
- webpack入门(三)——webpack 配置
- webpack入坑之旅(三)webpack.config入门
- webpack入坑之旅(三)webpack.config入门
- webpack的使用(1)
- webpack使用教程(一)
- webpack使用笔记(一)
- webpack(三)本地服务器环境配置
- List,Set,Map用法以及区别
- java多线程之死锁
- HttpClientGET
- Android数据库相关整理
- sc2017新高二&高一模拟赛7 总结
- Webpack 使用(三)
- photoView的缩放和拖拽
- POJ 3159 Candies(差分约束系统)
- 使用消息队列的 10 个理由
- svn设置提交忽略某些文件或文件夹
- Js-创建对象、字符串对象、获取日期
- 宝宝秀项目学习(三)
- Java中的“==”和equals的区别
- c++ list, vector, map, set 区别与用法比较