文档章节

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
Webpack热更新内存泄漏探索

搜寻资料 Webpack 内存泄漏issue https://github.com/webpack/webpack/issues/6929 几个问题: Chrome devtool bug https://bugs.chromium.org/p/chromium/issues/detail?id=852746 Webpack版......

pujiaxun
10/25
0
0
Golang学习笔记目录

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

ChainZhang
2017/12/26
0
0
MQTT学习笔记——MQTT协议体验 Mosquitto安装和使用

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

baiwengong
2016/01/07
170
0
我们是如何构建Twitter Lite的

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

众成翻译
01/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
6分钟前
0
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
21分钟前
0
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
25分钟前
48
8
jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部