之前运行dist下的js，都是手动把index.html拷贝过去的，每次把dist文件夹删除，都需要将index.html拷贝进去，这样很麻烦，我们在webpack官方插件中找到HtmlWebpackPlugin
module.exports = {

　　/**

　　* 打包模式，不配置会警告，但底层还是会去配置默认的，就是production

　　* production: 压缩模式，被压缩的代码

　　* development: 开发模式，不压缩的代码

　　*

　　*/

　　mode: 'development',

　　// 这个文件要做打包，从哪一个文件开始打包

　　entry: './src/index.js',

　　plugins: [new HtmlWebpackPlugin()],

　　// 打包文件要放到哪里去，就配置在output这个对象里

　　output: {

　　　　// 打包好的文件名字

　　　　filename: 'bundle.js',

　　　　/**

　　　　* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径

　　　　* __dirname指的是webpack.config.js所在的当前目录的这个路径

　　　　* 下面这个结合就是一个绝对路径

　　　　*/

　　　　path: path.resolve(__dirname, 'dist')

　　}

}
这样配置好，再去打包，发现会自动生成一个index.html，
index.html
<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>Webpack App</title>

　　</head>

<body>

　　<script type="text/javascript" src="bundle.js"></script></body>

</html>

html里面还引入了bundle.js。而且在src里面我并没有这个index.html.这就是webpack里面插件的作用

HtmlWebpackPlugin这个插件能干什么呢？HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
我们再打开index.html，发现网页上什么也没有。为什么呢？
我们看自己的代码逻辑
index.js
var root = document.getElementById('root');

import './index.scss';

root.innerHTML = '<div class="iconfont iconfangdajing">abc</div>';
代码逻辑是找到id为root到节点，再把abc挂在到root上。但是我们看index.html并没有root这个标签。所以说明用webpack生成到这个html，少了一个id为root的标签。那我想让他自动生成这个id为root的标签，怎么办，可以对这个html-webpack-plugin做一个配置
plugins: [new HtmlWebpackPlugin({

　　template: 'src/index.html'

})],
然后在src里面自己写一个模版index.html
<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>html template</title>

　　</head>

　　<body>

　　　　<div id='root'></div>

　　</body>

</html>
然后运行npm run bundle，打开自动生成的html
<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>html template</title>

　　</head>

　　<body>

　　　　<div id='root'></div>

　　　　<script type="text/javascript" src="bundle.js"></script>
　　</body>

</html>

可以惊讶的看到id为root的标签插入进去了。这是为什么呢？

html-webpack-plugin会自动生成一个html，这个html是以哪个模版生成的呢，是src下面的index.html为模板生成的。生成之后，会把打包出来bundle.js注入到html中。
通过这个例子，我们说明一下webpack中plugin的作用。
plugin可以在webpack运行到某个时刻的时候，帮你做一些事情。这个很像生命周期函数的定义。这个时刻是什么时刻呢，就是webpack打包结束的时刻。其它的插件也会在某些时刻做一些事情，比如刚打包的时刻。比如打包js的某个时刻。再举个例子。。
我们现在打包好的名字叫bundle.js，现在我改一下，叫做dist.js
output: {

　　filename: 'dist.js',

　　path: path.resolve(__dirname, 'dist')

}
然后重新打包，然后dist目录下会多出一个dist.js文件，html里面自动引入的也是dist.js文件。但是我们看bundle.js的文件依然存在，为什么呀，一个是我们刚才没有删除dist，再打包，但每次打包都需要删除一下，会很麻烦。我们希望每次打包的时候，自动将dist删除，这样就不会有上次遗留的东西了。现在就需要另外一个插件，在官网webpack下找不到，叫做clean-webpack-plugin
先安装
npm install clean-webpack-plugin -D
装好之后，我们去增加配置
plugins: [
　　new HtmlWebpackPlugin({

　　　　template: 'src/index.html'

　　}), new CleanWebpckPlugin()
],
这个意思是在打包之前先删除掉dist这个文件夹。这样运行npm run bundle，之前bundle.js就不在了。

使用plugins让打包更便捷的更多相关文章

  1. 更便捷的Mybatis增强插件——EasyMybatis

    easy-mybatis是一个对Mybatis的增强框架(插件).在Spring集成Mybatis的基础上,将项目开发中对数据库的常用操作统一化.使用本框架可以很便捷的对数据库进行操作,提高开发效率, ...

  2. 微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

    今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也 ...

  3. 更便捷的css处理方式-postcss

    更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...

  4. Android源码浅析（三）——Android AOSP 5.1.1源码的同步sync和编译make，搭建Samba服务器进行更便捷的烧录刷机

    Android源码浅析(三)--Android AOSP 5.1.1源码的同步sync和编译make,搭建Samba服务器进行更便捷的烧录刷机 最近比较忙,而且又要维护自己的博客,视频和公众号,也就没 ...

  5. HarmonyOS新能力让数据多端协同更便捷，数据跨端迁移更高效！

    作者:yijian,终端OS分布式文件系统专家:gongashi,终端OS分布式数据管理专家 HarmonyOS作为分布式操作系统,其分布式数据管理能力非常重要.我们也一直围绕持续为开发者带来全局&q ...

  6. 更便捷的Android多渠道打包方式

    本文先回顾了以往流行的多渠道打包方式,随后引入的mcxiaoke的packer-ng-plugin项目,介绍该项目在实际应用(配合友盟统计)中如何解决更方便的Android多渠道打包问题 多渠道打包方 ...

  7. 【读书笔记】【深入理解ES6】#5-解构：使数据访问更便捷

    ES6为对象和数组都添加了解构功能,将数据解构打散的过程变得更简单,可以从打散后更小的部分中获取所需信息. 对象解构 let node = { type: "Identifier" ...

  8. 使用alias让命令行更便捷

    在linux命令行上调试程序,经常是这样子做: $ ps x | grep sceneserver pts/ S+ : grep sceneserver ? Ssl : ./sceneserver/s ...

  9. 融云红包全新升级，让App用户更便捷地用“钱”交流感情！

    随着移动互联网的飞速发展,如何增强社交关系.留住用户的心已成为移动社交化时代各类App持续探索的问题,除了接入即时通讯的能力,众多社交平台开始通过趣味性十足的红包功能为App中的社交场景赋能.当即时通 ...

随机推荐

  1. SQL 事务与锁

    了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...

  2. java中程序上线报错： tomcat中java.lang.OutOfMemoryError: PermGen space

    在程序测试没问题之后,上线试运行,在运行的过程中某个功能一点击就报如下错,然后重启服务器就好了,一会又是如此,解决方法如下(亲测) PermGen space的全称是Permanent Generat ...

  3. poj 3104 dring 二分

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7684   Accepted: 1967 Descriptio ...

  4. MyBatis学习(二)---数据表之间关联

    想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...

  5. C#学习笔记（基础知识回顾）之枚举

    一:枚举的含义 枚举是用户定义的整数类型.在声明一个枚举时,要指定该枚举的示例可以包含的一组可接受的值.还可以给值指定易于记忆的名称.个人理解就是为一组整数值赋予意义. 二:枚举的优势 2.1:枚举可 ...

  6. OpenStack IceHouse 部署 - 5 - 网络节点部署

    Neutron网络服务(网络节点)     目录 [隐藏]  1 参考 2 前置工作 2.1 调整内核参数 3 安装 4 配置 4.1 keystone对接 4.2 rabbitmq对接 4.3 me ...

  7. FATAL bad indentation of a mapping entry at line 83, column 3: branch: master 已解决；

    部署hexo 时候,修改完_config.yml  文件后更新报错如下,问题解决: FATAL bad indentation of a mapping entry at line 83, colum ...

  8. Postman如何调试

    在用Postman接口测试过程当中,肯定少不了调试,下面记录一下Postman如何通过控制台输出进行调试: 一.打开控制台(View-Show Postman Console) 二.预置测试数据(测试 ...

  9. [转] Linux 3.10 ARM Device Tree 的初始化

    [转] Linux 3.10 ARM Device Tree 的初始化 本文代码均来自标准 linux kernel 3.10,可以到这里下载 https://www.kernel.org/     ...

  10. android OrmLite

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...