webpack 学习笔记 02 快速入门
webpack 的目标
- 将依赖项分块，按需加载。
- 减少web app的初始加载时间。
- 使每一个静态集合都能够作为组件使用。
- 有能力集成第三方库，作为组件使用。
- 高度可配置化。
- 适用于大型项目。
INSTALLING WEBPACK
在已安装node.js的情况下，输入以下命令行：
npm install webpack -g
SETUP THE COMPILATION
创建一个空的文件夹，分别创建以下文件：
entry.js
index.html
js中写入如下内容：
document.write("webpack 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
webpack将会编译，生成捆绑文件。结果如下：
MUTI FILE
让我们再增加一个js，以下是文件名与内容
content.js
module.exports = "It works from content.js.";
非常典型的CommonJs式的代码，对吧。
修改entry.js的内容
去掉 document.write("It works.");
增加 document.write(require("./content.js"));
重新运行编译指令，就可以在本地访问index.html看到新的结果了。
THE FIRST LOADER
webpack 除了可以解决js的依赖外，还能解决css的引用，压缩的问题。
这时，我们需要使用loader，使用css-loader来处理css文件，使用style－loader来支持改动样式。
运行指令
npm install css-loader style-loader
更新entry.js的内容
require("!style!css!./style.css");
document.write(require("./content.js"));
我们通过
!style!css!这样的形式，来指定Loader的传输管道，经过了一系列的loader处理后，结果将会是一个js组件。
编译
webpack ./entry.js bundle.js
重新浏览页面，就可以看到这样的结果。
BINDING LOADERS
通过在命令行中指定需要的loader，我们可以避免在刚才require部分的代码中，写出!style!css!
webpack ./entry.js bundle.js --module-bind "css=style!css"
这样，我们可以将entry.js修改，并不影响结果
require("./style.css");
document.write(require("./content.js"));
CONFIG FILE
程序员总是讨厌繁琐的人工操作，我们可以将刚才的 --module-bind "css=style!css"转由配置文件完成。
目录下添加webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
这时，我们只需要输入命令webpack就可以得到相同的结果啦。
WATCH MODE
作为程序员，我们不希望每次有改动后，都要手动运行指令。
webpack --watch
使用Watch模式时，webpack将会检测所有入口js文件及其依赖项的变化，一旦变化发生，编译过程将会重新运行。
webpack 学习笔记 02 快速入门的更多相关文章
- springboot笔记02——快速入门quickstart
前言 学习一个新的框架,往往会用一个quickstart快速入门,这次就写一下springboot的quickstart程序. 开发环境 JDK 1.8 Springboot 2.1.6 Maven ...
- C++ Primer学习笔记_1_快速入门
C++快速入门 一 编写简单程序 // main是操作系统唯一显示调用的函数int main() {/**return返回的值是一个状态指示器 0:成功 非0:返回错误给OS*以echo $?命令可以 ...
- 【NodeJS 学习笔记02】入门资源很重要
前言 在我映像中,异步最早出现与ajax,当时我还在搞.net,然后.net居然出了一个异步的控件...... 虽然我最后知道了他不是异步的......然后,前端异步用得特别多,如果不是异步的程序,你 ...
- Kafka学习笔记2: 快速入门
在开始Kafka环境搭建之前,首先要安装Linux系统,并在Linux系统上安装JDK1.8版本,关于linux虚拟机的安装和linux系统下jdk的安装可以参考我的博文: http://blog.c ...
- 学习笔记-CCS-MSP430F5529[快速入门篇二]
由于2021的全国电赛延期了,从今天开始打算好好整理一下使用CCS编程的经验,本篇笔记会好好整理一下我备赛期间用CCS写的程序,包括外部中断,定时器部分的定时中断,定时器输入捕获,PWM波输出,UAR ...
- webpack学习笔记一（入门）
webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...
- Vue 学习笔记之快速入门篇
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...
- 学习笔记-CCS-MSP430F5529[快速入门篇一]
由于最近竞赛需要使用TI公司的MSP430系列芯片,本人在最近两天匆忙的学习了一下MSP430F5529(下文统一称作5529)的使用.写下本文是为了将这两天学习内容做一个复习,并且将学习过程中遇到的 ...
- MongoDB学习笔记—02 MongoDB入门
Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...
随机推荐
- Android中MenuInflater实例
我们知道,LayoutInflater是用来实例化整个布局文件,而MenuInflater是用来实例化Menu目录下的Menu布局文件的. 传统意义上的菜单定义需要Override Activity的 ...
- 慧自文档：代替 Everything 来快速查找文件的，实现文件显示在文件夹的层次结构中
1. 搜索功能和Everything一样快和强大 具有 Everything 搜索快.搜索功能强等优点, 解决了不能方便选择搜索哪个文件夹, 解决了不能同一个画面进行预览等问题 2.文件直接显示到文件 ...
- 算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification)
算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification) 0.写在前面的话 我个人一直很喜欢算法一类的东西,在我看来算法是人类智慧的精华,其中蕴含着无与伦比 ...
- Xcode清缓存
前往-->按住option键进入资源库-->Developer-->Xcode-->DerivedData 删除里面的文件就行了
- sql server查询出的结果中添加一列序列行
select row_number()over(order by id) as rownum ,[UserName] ,[Password] ,[Mobile] ,[Email] ,[Sex] ,[C ...
- ASP.NET MVC4 学习系统一（项目模板）
项目模板 1.空模板 空模板用于创建ASP.NETMVC 4网站的架构,包含基本的文件夹结构,以及需要引用的asp.netmvc程序集,也包含可能要使用的javaScript 库.模板同样包 ...
- C++中rapidxml用法及例子
rapidxml是一个快速的xml库,比tinyxml快了50-100倍.本文给出创建.读取.写入xml的源码. 由于新浪博客不支持文本文件上传,在使用下面代码需要先下载 rapidxml,关于这个库 ...
- 数学对象Math ceil()、floor()、round()方法
Math.ceil() 功能:对一个数进行上取整. 语法:Math.ceil(x) 参数: x:一个数值. 返回值:返回大于或等于x,并且与之最接近的整数. 注:如果x是正数,则把小数“入”: ...
- CentOS下通过rdesktop连接Windows远程桌面
众所周知,微软的Windows提供了一种远程桌面系统(Remote Desktop),该服务的默认端口是3389,可使用户远程登录进行系统管理或作为终端服务器运行各种应用软件. 而要连接Windows ...
- /proc/cpuinfo
/proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间. 它以文件系统的方式为访问系统内核数据的操作提供接口. 用户和应用程序可以通过 proc得到系统的信息,并可以改变内核的某些参数 ...