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的当个实例可以容纳多个独立的 ...
随机推荐
- 从手工测试转型web自动化测试继而转型成专门做自动化测试的学习路线。
在开始之前先自学两个工具商业web自动化测试工具请自学QTP:QTP的学习可以跳过,我是跳过了的.开源web自动化测试工具请自学Selenium:我当年是先学watir(耗时1周),再学seleniu ...
- worker启动executor源码分析-executor.clj
在"supervisor启动worker源码分析-worker.clj"一文中,我们详细讲解了worker是如何初始化的.主要通过调用mk-worker函数实现的.在启动worke ...
- 如何查看IIS并发连接数
如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带的系统监视器来查看. 一.运行-->输入"perfmon.msc". 二.在"系统监 ...
- c# 获取excel所有工作表
var filePath="f:\xx.xlsx" string connStr = "Provider=Microsoft.Ace.OleDb.12.0;" ...
- 重拾HTML（一）
一.网页组成 HTML:网页的具体内容和结构,由N个标签(节点,元素,标记)组成 CSS:网页的样式,美化网页 JavaScript:网页的交互效果,比如用户鼠标的点击事件作出响应 二.常见的HT ...
- IOS thread1:exc_bad)access(code=exc_1386_gpflt)错误
这种错误通常是内存管理的问题,一般是访问了已经释放的对象导致的,可以开启僵尸对象(Zombie Objects)来定位问题: 在Xcode的菜单: Product->Scheme->Edi ...
- Centos6.5 minicom安装与配置
Linux下的Minicom的功能与下的超级终端功能相似,适于在通过超级终端对设备的管理以及对嵌入操作系统的升级 1.minicom的安装 查看是否安装: rpm -qa | grep minic ...
- ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
- Java基础整理（1）
1.源代码的文件名必须与公共类(public)的类名一致,而且一个源代码文件中最多只能有一个公共类(public) 2.注释: 3种 行注释 以双斜线 // 开始 段落注释 /* 注释内容 ...
- HBase简介（很好的梳理资料）
http://www.tuicool.com/articles/iieIz2 一. 简介 history started by chad walters and jim 2006.11 G re ...