Webpack--自学笔记
原文--http://webpack.github.io/docs/tutorials/getting-started/
什么是webpack？
webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。
1.怎么安转webpack
首先需要安装node.js，在命令行中输入：
$ npm install webpack -g
2.怎么使用webpack
1.从一个空的文件夹开始，首先创建：entry.js,然后输入：
document.write("It works.");
接着再添加一个html文件：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
在这之后，在命令行中运行：
$ webpack ./entry.js bundle.js
它将编译文件，并且会创建一个文件包。命令运行成功之后，显示：
Version: webpack 1.13.3
Time: 24ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]
在浏览器打开index.html，会看见 “It works.”。
2.创建第二个个文件content.js，添加内容：
module.exports = "It works from content.js.";
更新entry.js
- document.write("It works.");
+ document.write(require("./content.js"));
重新编译：
$ webpack ./entry.js bundle.js
刷新浏览器之后，回看到“It works from content.js.”。
webpack将分析接口文件依赖其他文件。这些文件(称为模块)都包含在bundle.js。
webpack会给每个模块一个惟一的id和保存所有模块访问bundle.js id的文件。只有输入模块是在启动时执行的。一个小的运行时提供了需要函数和在需要时执行的依赖关系。
3.添加css文件
webpack只能处理JavaScript本身,所以我们需要css-loader处理CSS文件。我们还需要style-loader CSS文件应用样式。
运行npm安装css-loader style-loader安装加载器。(他们需要安装在本地没有- g),这将为您创建一个node_modules文件夹,加载器将运行。
创建一个css文件，style.css
body {
background: yellow;
}
然后更新entry.js：
+ require("!style!css!./style.css");
document.write(require("./content.js"));
通过 “!style!css!” 这样的前缀，可以把文件进行一系列的转化，最终变成 javascript 的一个模块。
命令行绑定 loaders
如果我们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")
或者我们喜欢灵活定制 css 文件的转化方式。
修改 entry.js
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js"));
执行下面的命令：
$ webpack ./entry.js bundle.js --module-bind "css=style\!css"
官网说明在这有个错误，css=style\!css 里面少了个反斜杠，原因是叹号在 bash 里有特殊意义
4.添加 webpack.config.js
项目根目录下新建一个webpack.config.js ，然后通过一句命令$ webpack就能打包我们的项目。
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
在命令行，输入：
webpack
webpack 命令会尝试读取同目录中的 webpack.config.js 文件。你会看到：
Version: webpack 1.13.3
Time: 148ms
Asset Size Chunks Chunk Names
bundle.js 10.7 kB 0 [emitted] main
chunk {0} bundle.js (main) 8.85 kB [rendered]
[0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built]
[1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
[2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built]
[3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
[5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]
如果项目增加编译可能需要一段时间。所以我们希望显示进度条。和我们想要的颜色…
webpack --progress --colors
我们不想在每次修改后手动编译…
webpack --progress --colors --watch
Webpack可以缓存不变的模块和输出文件编译。
当使用观看模式,观察者webpack安装文件的所有文件,编译过程中使用。如果发现任何改变,它会再次运行编译。启用高速缓存的时候,webpack保持在内存中每个模块并将重用它如果不是改变了。
5.开发服务器
这结合一个小express服务器在localhost:8080是静态资产以及包(自动编译)。结束时它会自动更新浏览器页面重新编译(SockJS)。打开http://localhost:8080 / webpack-dev-server /包在您的浏览器中。
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
Webpack--自学笔记的更多相关文章
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...
- 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- python自学笔记
python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...
- webpack入门笔记
此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html
- ssh自学笔记
Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...
- JavaScript高级程序设计之自学笔记（一）————Array类型
以下为自学笔记. 一.Array类型 创建数组的基本方式有两种: 1.1第一种是使用Array构造函数(可省略new操作符). 1.2第二种是使用数组字面量表示法. 二.数组的访问 2.1访问方法 在 ...
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- JS自学笔记05
JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...
随机推荐
- java入门知识点结构
第一部分 计算机程序和面向对象编程 编程语言种类: 机器语言:2进制(0和1) 汇编语言:英文字符缩写和助记符 高级语言: 面向过程:面向过程是从微观上/细节上处理具体事务. C语言 面向对象: ...
- vim插件管理vundle备忘
转自:http://blog.csdn.net/jiaolongdy/article/details/17889787/ http://www.cnblogs.com/xia520pi/archive ...
- WebBrowser的Cookie操作之流量刷新机
最近一直在思考着如何通过代码去伪装或实现人工自然浏览网页的效果,起初能想到的是用WebBrowser实现这一效果,需要达到的功能预想有以下几点: 1.自动刷新 2.模拟人工下拉滚动条并停留一段时间: ...
- mysql的DATE_FORMAT用法
DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的输出格式. mysql的DATE_FORMAT用法 %a 缩写星期名 %b 缩写月名 %c ...
- AES —— JAVA中对称加密和解密
package demo.security; import java.io.IOException; import java.io.UnsupportedEncodingException; impo ...
- 在Windows Server 2012 R2中搭建SQL Server 2012故障转移集群
需要说明的是我们搭建的SQL Server故障转移集群(SQL Server Failover Cluster)是可用性集群,而不是负载均衡集群,其目的是为了保证服务的连续性和可用性,而不是为了提高服 ...
- STM32 Unicode 与 GBK 转换 .bin文件放到SD卡是啥意思
2个数组 : }; }; 一个是Unicode 编码,一个是GBK编码: 用c2b软件转成.bin 二进制文件放到SD卡里: SD卡放入字库 .FON STM32 代码: 代码中SD卡字库和二进制路径 ...
- 乌版图 read-only file system
今天在启动虚拟机的时候,运行命令svn up的时候,提示lock,并且read-only file system,这个....我是小白啊,怎么办?前辈在专心写代码,不好打扰,果断找度娘啊 于是乎,折腾 ...
- [django]django+datatable简单运用于表格中
使用datatable首先需要下载datatable文件,文件主要包括三个文件夹css,img,js相关文件,在django中如何配置呢? 首先需要在模板中引入datatable文件,格式如下: &l ...
- DNS查找域名的过程
当我们在浏览器输入一个url地址时,需要获取到这个url的域名,本篇文章主要介绍了关于DNS查找解析域名的过程的一些东西. 关于DNS 不清楚DNS的小伙伴可以点这里:关于域名系统DNS解析IP地址的 ...