文档章节

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

c
 caiyezi
发布于 2016/11/08 20:24
字数 742
阅读 16
收藏 0
点赞 0
评论 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
俩年的这五十篇技术博客,送给不忘初心的你。

这俩年通过体验博客园、常驻简书、甚至搭建静态博客站点来寻找自己的写作归属,却总觉缺少了点什么。直到近期尝试到将 Github issues + blog 结合的终极体验——既有清新的标签管理功能,又有...

韩亦乐
2017/09/21
0
0
webpack(2)——配置项详解

引子 昨天有关 Webpack 笔记也是有许多人喜爱的,所以今天再接再厉汇总了第二篇笔记,欢迎各位指点不足之处。 之后的笔记应该会记录一些实际开发了,希望在这个周末内彻底入门 Webapck。 we...

AdityaSui
05/18
0
0
webpack 1——核心概念的理解

引子 为什么要写这篇文章?因为今天掘金的早报有一篇关于 Webpack 的入门的文章,读完之后发现自己确实该学习一下 Webpack 了,所以有了这篇文章。 我对于 webpack 的了解仅限于在 vue-cli ...

AdityaSui
05/17
0
0
前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方
01/08
0
0
2. 脚手架解构 | 网站搭建学习笔记

上一篇 脚手架搭建 | 网站搭建学习笔记 中通过yeoman和vue-cli搭建了一个脚手架,脚手架的好处是自动构建出了一套可以被直接使用的网站。从认识世界的顺序来说,看到一个东西,有了直观的印象...

MiSterRabbit
2017/12/31
0
0
ReactJS学习笔记——npm、JSX、webpack

ReactJS学习笔记——npm、JSX、webpack [toc] React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScr...

小米墨客
2016/03/18
4.1K
11

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
0
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部