webpack2系列step1
第一篇:HTML
本文将一步一步的介绍webpack2的配置,从最基础的一直到与node结合。
操作都一样:
midir step1 && cd step1
npm init -y
npm install --save -dev webpack@2.x.x
我的webpack版本号:
这样几步,就把最基本的webpack装好了,好了,开始我们的第一步,HTML吧。
最简单的入口和出口配置:
最简单的的基本配置,只有入口和出口,然后执行webpack,就能看到dist文件夹目录下生成了bundle.js
npm install html-webpack-plugin --save-dev 安装HTML的插件,准备对HTML进行打包处理(后面会详细讲解主要插件的用法)
npm install clean-webpack-plugin --save-dev 每次打包前,需要把原来的文件删除,这样就可以不用怀疑你生成的文件是否是最新的了 安装这个插件
把对HTML所有打包处理的代码如下,这样HTML就打包就处理完成了。
webpack.config.js:
index.html:
看一下生成的HTML:
好了,到这里最简单的HTML打包处理就完成了,谢谢大家。
附上源码路径:leo的GitHub
https://github.com/suxiaoX/webpack2
webpack2系列step1的更多相关文章
- SQL Server 监控系列(文章索引)
一.前言(Introduction) SQL Server监控在很多时候可以帮助我们了解数据库做了些什么,比如谁谁在什么时候修改了表结构,谁谁在删除了某个对象,当这些事情发生了,老板在后面追着说这是谁 ...
- SQL Server 复制系列(文章索引)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 前言(Introduction) 复制逻辑结构图(Construction) 系列文章索引(Catalog) 总结&am ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- C++的性能C#的产能?! - .Net Native 系列《二》:.NET Native开发流程详解
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- Nagios学习实践系列——基本安装篇
开篇介绍 最近由于工作需要,学习研究了一下Nagios的安装.配置.使用,关于Nagios的介绍,可以参考我上篇随笔Nagios学习实践系列——产品介绍篇 实验环境 操作系统:Red Hat Ente ...
- [Python] 利用Django进行Web开发系列(二)
1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...
- Storm系列(三):创建Maven项目打包提交wordcount到Storm集群
在上一篇博客中,我们通过Storm.Net.Adapter创建了一个使用Csharp编写的Storm Topology - wordcount.本文将介绍如何编写Java端的程序以及如何发布到测试的S ...
- Storm系列(二):使用Csharp创建你的第一个Storm拓扑(wordcount)
WordCount在大数据领域就像学习一门语言时的hello world,得益于Storm的开源以及Storm.Net.Adapter,现在我们也可以像Java或Python一样,使用Csharp创建 ...
- 解读Unity中的CG编写Shader系列八(镜面反射)
转自http://www.itnose.net/detail/6117378.html 讨论完漫反射之后,接下来肯定就是镜面反射了 在开始镜面反射shader的coding之前,要扩充一下前面提到的知 ...
随机推荐
- 对Appium的认识 get
介绍 Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持iOS.Android及FirefoxOS平台测试.Appium使用WebDriver的json w ...
- 第4阶段——制作根文件系统之分析init_post()如何启动第1个程序(1)
本章学习如何启动第一个应用程序 1.在前面的分析中我们了解到,在init进程中内核挂接到根文件系统之后,会开始启动第一个应用程序: kernel_init函数代码如下: static int __in ...
- webStrom2017.1版本如何添加vue.js插件
第一步:打开webStrom-setting 第二步:选择File and Code Templates--点击左上角"+"号 第三步:在Name:vue File Exte ...
- 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?
前言 Java集合框架三种主要类型的集合:规则集(Set).线性表(List).队列(Queue).Set用来存储不可重复的元素:List用来存储有元素构成的有序的集合:而Queue则用于存储用先进先 ...
- setAttribute设置无效
我发现ie浏览器中动态用setAttribute设置style属性值始终不能设置,经过一番查找发现了这篇文字 http://webcenter.hit.edu.cn/articles/2009/05- ...
- MySQL插入10万数据时间(结论:最快14.967s,每秒插入6681条)
记录我的一次MySQL操作Demo: 存储过程: DROP PROCEDURE IF EXISTS my_insert; CREATE PROCEDURE my_insert() BEGIN ; lo ...
- 我的hibernate学习记录(一)
之前已经过滤一下hibernate的简单的用法,但是近期有点时间,所以重新看下视频,敲下代码,翻下笔记,写博客与大家分享一下. hibernate简介 Hibernate是一个开放源代码的对象关系映射 ...
- IT经典书籍——Head First系列…
Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...
- 2017春季 JMU 1414软工助教 链接汇总
助教自我介绍 学生博客链接和coding链接 [1414软工助教]团队博客汇总 助教总结 评分 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1: ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.24
在下午3-4节Linux课结束后,我们teamworkers全体队员留在禹州楼304进行约20分钟的短暂会议,会议讨论关于昨天任务的总结并分配了今天的新任务,大家畅所欲言,情绪高昂,各自阐述了自己不一 ...