第一篇: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的更多相关文章

  1. SQL Server 监控系列(文章索引)

    一.前言(Introduction) SQL Server监控在很多时候可以帮助我们了解数据库做了些什么,比如谁谁在什么时候修改了表结构,谁谁在删除了某个对象,当这些事情发生了,老板在后面追着说这是谁 ...

  2. SQL Server 复制系列(文章索引)

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 前言(Introduction) 复制逻辑结构图(Construction) 系列文章索引(Catalog) 总结&am ...

  3. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  4. C++的性能C#的产能?! - .Net Native 系列《二》:.NET Native开发流程详解

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  5. Nagios学习实践系列——基本安装篇

    开篇介绍 最近由于工作需要,学习研究了一下Nagios的安装.配置.使用,关于Nagios的介绍,可以参考我上篇随笔Nagios学习实践系列——产品介绍篇 实验环境 操作系统:Red Hat Ente ...

  6. [Python] 利用Django进行Web开发系列(二)

    1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...

  7. Storm系列(三):创建Maven项目打包提交wordcount到Storm集群

    在上一篇博客中,我们通过Storm.Net.Adapter创建了一个使用Csharp编写的Storm Topology - wordcount.本文将介绍如何编写Java端的程序以及如何发布到测试的S ...

  8. Storm系列(二):使用Csharp创建你的第一个Storm拓扑(wordcount)

    WordCount在大数据领域就像学习一门语言时的hello world,得益于Storm的开源以及Storm.Net.Adapter,现在我们也可以像Java或Python一样,使用Csharp创建 ...

  9. 解读Unity中的CG编写Shader系列八(镜面反射)

    转自http://www.itnose.net/detail/6117378.html 讨论完漫反射之后,接下来肯定就是镜面反射了 在开始镜面反射shader的coding之前,要扩充一下前面提到的知 ...

随机推荐

  1. JavaScript 学习笔记 - LocalStorage

    前言 本文主要介绍本地存储的基本使用,以及它和 Cookie.SessionStorage 的区别. 简单回顾 Cookie 在 HTML5 之前,本地存储数据一般是通过 Cookie 来完成的.我们 ...

  2. 【渗透课程】前言-揭开Web渗透与安全的面纱(必看)

    服务器是怎么被入侵的 攻击者想要对一台计算机渗透必须具备以下条件: 1.服务器与客户端能够正常通讯 (服务器是为客户端提供服务的) 2.服务器向客户端提供的权限(服务)或者说是端口. 服务端所提供的服 ...

  3. 创建springbootdemo后运行报MongoSocketOpenException错误解决方法

    在类SpringbootdemoApplication上右键Run as选择Spring Boot App后Console输出报错日志如下: com.mongodb.MongoSocketOpenEx ...

  4. ssh框架知识点回顾

    =========================================================================================== ======== ...

  5. mongodb菜鸟整理

    一,mongodb的安装与连接 从官网下载后,解压或者安装到某个目录下 1  首先需要自己创建一个db文件夹 ,用于存放数据库的数据 然后还需要创建一个log文件夹,里面需要自己创建一个mongodb ...

  6. DB Error || Warning

    数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...

  7. C++ operator bool

    雕虫小技: #include <iostream> struct A{ operator bool(){ return false; } }; int main() { A a{}; if ...

  8. 数据库学习任务二:数据库连接对象SqlConnection

    数据库应用程序的开发流程一般主要分为以下几个步骤: 创建数据库 使用Connection对象连接数据库 使用Command对象对数据源执行SQL命令并返回数据 使用DataReader和DataSet ...

  9. !Web云笔记--HTML基础

    Web自学笔记第一阶段笔记综合汇总 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社 全部阶段: ...

  10. 团队作业7---Alpha冲刺之事后诸葛亮

    一.设想与目标 1.我们的软件要解决什么问题? 我们的软件主要是帮助老师解决通过博客地址收集博客的相关信息来对学生对课程的认真与努力程度进行评定的问题,主要就是根据采集到的各项博客数据作为评分项,构建 ...