webpack插件之htmlWebpackPlugin

webpack插件之htmlWebpackPlugin

webpack插件 自动化 htmlWebpackPlugin

由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加载顺序,而只要在index.html内使用<script>标签引入bundle.js即可。

在index.html内使用引入bundle.js

开发阶段,index.html在根目录,script引入好像也没什么问题。

index.html在根目录

但在真实发布项目时,发布的内容js文件都在dist文件夹内。但dist文件夹中现在没有有index.html文件,怎么引入js文件? 那么打包js等文件好像毫无用处了。

现在我们的需求是

1.将index.html放到dist文件夹内

2.由于index.html的路径发生改变了,所以引入的路径也要做出的相应改变

.将index.html放到dist文件夹内并修改路径

这些修改都要手动操作,手动操作难免出错,这个时候我们就需要一个插件..

htmlWebpackPlugin

HtmlWebpackPlugin插件功能:

口在指定路径自动生成一个index.html文件(可指定模板生成)

口将打包好的js文件,自动通过script标签插入到body中

如果一个插件是webpack自带的,这时仅需导入即可;如果不是自带的,那就需要安装,然后再导入。

为了减少webpack的包体大小,大部分插件都不是webpack自带,需要自行安装。

htmlWebpackPlugin使用步骤

1.安装htmlWebpackPlugin指令

npm i html-webpack-plugin --save-dev

2.修改webpack.config.js配置,先引用html-webpack-plugin插件,并添加plugins属性

引用html-webpack-plugin插件,并添加plugins属性

3.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件,此时无需我们再手动更改index.html的位置和引入js脚本.

dist文件夹自动生成一个index.html

自动引入打包好的js文件

4.由于我们使用webpack与vue协同开发,body体还需要一个div容器,用于绑定和挂载vue的元素,此时需要一个模板index.htm来生成。即dist文件夹下index.html需要根目录的index.html生成。修改根目录的index.html,并且给webpack.config.js下的htmlWebpackPlugin添加一个模板参数。

修改根目录的index.html

给webpack.config.js下的htmlWebpackPlugin添加一个模板参数

5.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件

运行npm run build指令

npm run build

6.打开浏览器控制台,在控制台可看到相应的输出。

打开浏览器控制台,在控制台可看到相应的输出

原文地址:https://www.cnblogs.com/singledogpro/p/12030578.html

时间: 2024-10-11 17:55:45

webpack插件之htmlWebpackPlugin的相关文章

webpack 插件: html-webpack-plugin

插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况.你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载这些 bundles. Installation 使用 npm 安装这个插件 $ npm install

webpack 插件: html-webpack-plugin的使用

插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况.你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载这些 bundles. Installation 使用 npm 安装这个插件 $ npm install

webpack插件之html-webpack-plugin

官方文档:https://www.npmjs.com/package/html-webpack-plugin html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体,即一个HTML模板,里面通过script标签引用打包后的JS. 下面来看一下基本配置: 1 const Path = reqiure('path) 2 // 引入插件 3 const HtmlWebpackPlugin = require('html-webpack-plugin') 4 5 mo

【webpage】webpack常用插件之HtmlWebpackPlugin

webpack常用插件之HtmlWebpackPlugin 1.HtmlWebpackPlugin 使用HtmlWebpackPlugin两大作用:1为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题2可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口 2.插件原理 将 webpack中`entry`配置的相关入口thunk  和`extra

webpack 插件拾趣 (1) —— webpack-dev-server

结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉,兴许合适. 原本期望每篇文章里可以介绍若干个插件,但鉴于部分插件略为复杂,且单篇内容不想写的唇焦舌敝惹人倦烦,所以像本文要介绍的 webpack-dev-server 就独立一文了. 回归主题,今天你或许会花上30分钟的时间读完本章,并掌握 webpack-dev-server 的使用方法.理清一些

编写webpack 插件

Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要理解Webpack底层的东西.要有月底源代码的准备. Compiler 和 Compilation 开发插件最重要的两个资源就是 compiler 和 compilation 对象,理解他们的是扩展Webpack重要的一步 compiler对象包涵了Webpack环境所有的的配置信息,这个对象在We

webpack插件机制

webpack插件机制是整个webpack工具的核心,那么webpack插件有什么特点呢? 1.独立的JS模块,暴露相应的函数 2.函数原型上的apply方法会注入compiler对象(之所以要定义apply方法,是因为源码中是通过plugin.apply()调用插件的) 3.compiler对象上挂载了相应的webpack事件钩子 4.事件钩子的回调函数里能拿到编译后的compilation对象,如果是异步钩子还能拿到相应的callback 下面看个例子: function MyPlugin(

webpack插件之webpack-dev-server

webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server 现在只需要使用 npm run build指令就可以自动打包,并自动处理好各种依赖关系,但还是存在一个问题, 如果对js文件的代码进行了修改,又要重新打包才能测试,很明显又要手动操作 在开发测试过程中,我们会经常修改代码后,然后频繁刷新页面查看效果.对于我们前端仔来说,每次修改代码后都需要重新编译才能测试.这个过程非常繁琐,这简直是个深坑,不能忍啊.使用webpack-de

webpack插件

插件 plugins:[ new ExtractTextPlugin.extrct({ }) //创建html new HtmlWebpackPlugin({ title:"first page", filename:"index.html", template:"/index.html, // true 显示在body false不显示(默认) inject:true "body" }), // 热替换 new webpack.Hot