文档章节

webpack学习笔记01——初次体验

c
 caiyezi
发布于 2016/11/08 20:24
字数 742
阅读 19
收藏 0

webpack:前端打包神器,目前活跃度甚至超过了gulp、grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用:

1、首先新建一个空白目录,用于项目根目录,比如我这里是simple_project

2、cmd窗口全局安装webpack:

npm install webpack -g      //cnpm install webpack -g

3、进入到项目内部执行npm init进行项目初始化,初始化后项目会多两个文件:node_modules、package.json文件

4、项目本地安装webpack依赖:

npm install webpack --save

5、新建entry.js入口文件:

require("./style.css");
document.write("it works</br>");
document.write(require("./content.js"));

这里我们引入了一个content.js文件和一个style.css样式表文件,接下来继续,新建index.html首页:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

这里我们直接引入了bundle.js文件,该文件尚未定义,这个是entry.js文件经过webpack打包后生成的文件,这里先这么引入即可。

6、新建style.css样式文件和content.js文件:

style.css如下:

body {
    background: yellow;
}

content.js:

module.exports = "this is from content.js";

这里的content.js直接exports一个字符串内容出来,然后entry.js因为引入了content.js,所以相当于直接引入了该字符串,这里的话所有的代码已经书写完毕。

7、webpack打包:

首先安装loaders打包工具:

npm install css-loader style-loader --save

webpack打包时会自动识别文件之间的依赖关系,直接生成单个文件,使用方法如下:

webpack ./entry.js bundle.js --module-bind "css=style!css"

运行效果如下:

这个时候打开项目根目录会看到如下文件结构:

webpack自动为我们生成了一个bundle.js文件以及打包后的样式文件,打开index.html文件效果如下:

打包之后页面依赖更加简单,index.html只需引入一个js即可,而js里面可以正常引入其它模块,样式及功能也都全部ok,方便快捷管理前端依赖。

8、换种方法实现以上内容:

上面使用webpack打包时指定了一些打包参数,这些参数其实我们可以直接配置到配置文件,可以免去打包命令过长的问题,思路更加清晰:

首先拷贝一份以上所有文件到一个新的目录,再删除其中webpack已经打包生成的文件,之后的文件目录如下:

接下来直接使用以下命令打包生成:

webpack

执行效果:

index.html效果同上。。。

9、接下来使用webpack-dev-server实现无刷新预览:

首先是安装插件:

npm install webpack-dev-server -g

进入到项目下启动服务,这样,bundle.js文件一旦修改便会自动编译,页面浏览器也会自动刷新,看下效果:

试着修改下entry.js文件内容,页面便会自动刷新:

很不错,很酷炫的感觉。。。

本文转载自:http://www.cnblogs.com/vipzhou/p/5914844.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
Webpack学习笔记 - 入门篇

如果你已经读了 Webpack学习笔记 - 体验篇,是不是有想进一步了解 的冲动。 没有。那是因为包子太大,你还没有咬馅儿呢。 Webpackr的工作方式 把项目当做一个整体,通过一个给定的入口文件 ...

他山之石
2016/12/28
32
0
Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang
2017/12/26
0
0
我们是如何构建Twitter Lite的

摘要:非常激动向大家介绍 Twitter Lite ,一个已经能在mobile.twitter.com上体验的渐进式网页应用。 Twitter Lite速度更快,应用了响应式设计,流量消耗更少,占用的存储空间也更小,并且在...

众成翻译
01/02
0
0
MQTT学习笔记——MQTT协议体验 Mosquitto安装和使用

MQTT学习笔记——MQTT协议体验 Mosquitto安装和使用标签: MQTT物联网Mosquitto2014-09-13 16:30 27023人阅读 评论(15) 收藏 举报分类: 物联网学习笔记(37) 版权声明:本文为博主原创文章...

baiwengong
2016/01/07
170
0
webpack学习笔记——入门篇:通俗理解webpack

前言 (在过去)对我这种渣渣来说,在项目里面一旦配置好了webpack之后,就再也不想碰这玩意儿了,因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍,还得不断地跑起来...

Eason_Wong
07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux 中不适用功能键切换TTY

本简要指南介绍了在类 Unix 操作系统中如何在不使用功能键的情况下切换 TTY。在进一步讨论之前,我们将了解 TTY 是什么。正如在 AskUbuntu 论坛的一个答案[1]中所提到的,TTY这个词来自 Tele...

问题终结者
3分钟前
0
0
OSChina 周三乱弹 —— 我自己总觉得我的灵魂有毒

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享王菲的单曲《匆匆那年 (Fleet of Time)》 《匆匆那年 (Fleet of Time)》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) 天长地...

小小编辑
9分钟前
3
3
深度学习与图像处理实例:人像背景虚化与背景替换

简单人像背景虚化处理思路如下: 对图像内容分割,提取人像,背景 背景模糊处理 人像与模糊处理后的背景融合 本实例使用DeepLabV3图像分割深度学习模型实现。代码如下: import numpy as np...

IOTService
昨天
0
0
八月新增开源项目:假装自己是图形界面的 Git 命令行工具

每月新增开源项目。顾名思义,每月更新一期。我们会从社区上个月新收录的开源项目中,挑选出有价值的、有用的、优秀的、或者好玩的开源项目来和大家分享。数量不多,但我们力求推荐的都是精品...

编辑部的故事
昨天
7
0
20180918 find命令与Linux文件扩展名

命令find 用来查找搜索文件。 搜索文件相关命令: which 从环境变量里的目录中去搜索 whereis(不常用) 从一个固定的库中搜索 locate(需要单独安装 yum install -y mlocate) 查询时会从/var/...

野雪球
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部