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的当个实例可以容纳多个独立的 ...
随机推荐
- 未完全关闭数据库导致ORA-01012: not logged的解决
首先使用SHUTDOWN 没加任何参数方式关闭数据库,在数据库未关闭时CTRL+Z停止执行,退出用SQLPLUS重登陆,出现报错:ORA-01012: not logged on SQL> st ...
- 初探接口测试框架--python系列4
点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...
- 科普：什么是IPV4?什么是IPV6?
IPv4是Internet Protocol version 4(网际协议版本4)的英文简称,而中文简称为“网协版4”. 目前的全球因特网所采用的协议族是TCP/IP协议族.IP是TCP/IP协议族中 ...
- 如何查看IIS并发连接数
如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带的系统监视器来查看. 一.运行-->输入"perfmon.msc". 二.在"系统监 ...
- RHEL7网卡设置
1.改网卡名 先vim /etc/sysconfig/grub:GRUB_TIMEOUT=5GRUB_DEFAULT=savedGRUB_DISABLE_SUBMENU=trueGRUB_TERMIN ...
- Nodejs笔记（二）
Nodejs事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一 ...
- PAT1015. Reversible Primes
//题的理解是n在基数b中的的表示中,正序和逆序值都是素数,但是其实可直接判断n,因为n在b中的正常序列值就是再换成十进制就是n,但是不A:不知道为什么 用笨方法,先把n展开成b进制,正常计算其实是翻 ...
- jQuery 监控键盘一段时间内没输入
监控一段时间没输入可用于简单的输入完成 上次实现了一个模拟输入完成则发送请求到后台获取数据的并显示到前台的问题,其中核心的判断标准是输入完成的定义. 即:用户怎么算输入完成. 我使用的标准是,当一个文 ...
- 实现MySQL的Replication
实现MySQL的Replication 实现MySQL的Replication在MySQL 3.23.15版本之后,MySQL提供了数据库复制的功能,可以实现两个数据库实时同步,增强了MySQ ...
- 使用cnpm搭建企业内部私有NPM仓库
cnpm是企业内部搭建npm镜像和私有npm仓库的开源方案.它同时解决了现有npm架构的一些问题. 为什么企业需要私有NPM 主要有如下理由: 确保npm服务快速.稳定:对于企业来说,上线生产系统的时 ...