webpack2系列step1--HTML

第一篇:HTML

本文将一步一步的介绍webpack2的配置,从最基础的一直到与node结合。

操作都一样:

midir step1 && cd step1

npm init -y

npm install --save -dev [email protected]

我的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

时间: 2024-10-26 15:46:14

webpack2系列step1--HTML的相关文章

[Ruby on Rails系列]2、开发环境准备:Ruby on Rails开发环境配置

前情回顾 上次讲到Vmware虚拟机的安装配置以及Scientific Linux 6.X系统的安装.这回我们的主要任务是在Linux操作系统上完成Ruby on Rails开发环境的配置. 在配置环境之前,首先要解释一下Scientific Linux 6.x,该Linux发行版与CentOS.Red Hat Linux的管理机制比较类似.如果你的Linux采用的是上述系统,基本上配置过程完全一致:如果你采用的是Ubuntu系统,配置过程可能会稍有不同. 那么,Start![请以管理员账号登陆

【用PS3手柄在安卓设备上玩游戏系列】FC(任天堂NES/FC主机)模拟器

NESoid 是安卓系统下公认最好的FC模拟器.据我所知,现在安卓系统下面的绝大部分的FC模拟器,都是基于 NESoid 的内核来开发的. 官方网站:http://www.nesoid.com NESoid 是原生支持实体手柄的,下面以<超级魂斗罗>为例说明我的设置步骤: Step1:运行 SixaxisController(以下简称 SC),连接手柄和设备,我的设备是小米2: Step2:扩展菜单按钮 > 设置 > 手柄设置,勾选"启用手柄",然后选择&quo

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

开篇介绍 最近由于工作需要,学习研究了一下Nagios的安装.配置.使用,关于Nagios的介绍,可以参考我上篇随笔Nagios学习实践系列--产品介绍篇 实验环境 操作系统:Red Hat Enterprise Linux Server release 6.0 (Santiago)   64 bit. 注意,Nagios只能安装在Linux或Unix平台,不支持Windows平台,当然,它可以监控Windows平台. 环境准备 Apache 和PHP 不是安装Nagios所必须的,其实也可以说

OAF_OAF EO系列增删改 - Delete详解和实现(案例)

2014-06-14 BaoXinjian 一.摘要 在OAF中,似乎不是根据你光标所在的行来删除对应的记录,而是根据记录指针来删除,而这个指针又与你的光标位置无关需要用代码来精确的定位.因此我们在删除记录时,需要编写一定的代码来实现. User’s Guide中提供了一种标准的删除方法,通过在在当前记录集中用指针进行循环来定位需要删除的记录(例子提供的是只删一条). 不管如何删除,总的实现思路如下: Step1. 首先给需要删除的记录做标记:  要么打勾选上,要么在行上放个图标按钮来点火,总之

解读Unity中的CG编写Shader系列9——镜面反射

讨论完漫反射之后,接下来肯定就是镜面反射了 在开始镜面反射shader的coding之前,要扩充一下前面提到的知识,加深理解镜面反射与漫反射的区别. 引用一下一位前人博文中的一些基础概念,特别是关于冯氏反射模型的: 平行光(directional light) 一种是从特定方向射入并只会照亮面对入射方向的物体,我们称之为平行光(directional light). 环境光(ambient light) 另一种光是来自所有方向并且会照亮所有物体,不管这些物体的朝向如何,我们称之为环境光(ambi

PO_PO系列 - 采购单管理分析(案例)

2014-07-01 BaoXinjian 一.摘要 PO采购单的类型 1. 标准采购业务 •业务背景: 标准采购业务的发生一般是,公司采购部门的采购员根据业务部门领导签字的请购单, 或者是已接受供应商报价的报价单,填写采购单,交部门领导审批,或更高层领导审批, 领导审批后,采购员即可通知供应商根据约定进行供货. 2. 一揽子采购业务 •业务背景: 一揽子采购业务的发生一般是,公司采购部门与供应商签订一个一揽子采购协议, 即在向该供应商进行采购时,由于采购量的变化,供应商可以根据实际的情况给与公

PO_PO系列 - 收货管理分析(案例)草稿

2014-07-01 BaoXinjian 一.摘要   二.分析 - 流程图 1. 收货概要 2. 收货控制 Receive Contorl  3. 收货类型 Receive Type 4. 收货调整  5. 退货处理 三. 案例 - 标准接受入库 Step1. 建立PO单 Step2. 入库至接受 Step3. 从接受入库至真正的Inventory store Step4. 查看inventory库存变化 四.案例 - 收货调整 六.设定 - 收货选项控制 入库时重要设定 *********

webpack 多页应用架构系列实战

阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpack的配置文件是一个nodejs的module,使用CommonJS风格来编写的,比如如下: module.exports = { entry: './index', output: { path: __dirname + '/dist', filename: 'bundle.js' } } webp

Angular系列----AngularJS入门教程02:静态模板(转载)

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>