js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走:
在这里有:
- 如何安装webpack
- 如何使用webpack
- 如何使用loader
- 如何使用webpack的开发者服务器
一、安装webpack
你需要之前安装node.js
$ npm install webpack -g
安装成功后,便可以使用webpack命令行了。
ok,开始工作!
二、新建一个空目录,名字为myApp,文件如下
entry.js
document.write("It works.");
index.html
文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
此时并没有bunble.js文件,我们通过webpack命令来生成:
$ webpack ./entry.js bundle.js
这句命令会编译entry.js
文件为新文件bunble.js
。如果执行成功的话,会有如下结果:
Version: webpack 1.12.2
Time: 43ms
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.
。
三、使用模块的形式,进行简单的模块导出与加载
新建文件:content.js
module.exports = "It works from congtent.js";
然后,编辑entry.js
文件:
var content = require("./content.js");
document.write(content);
然后,继续用webpack进行编译:
$ webpack ./entry.js bundle.js
此时浏览器变回输出It works from congtent.js
。
webpack会自己分析你的入口文件是否依赖其他文件,这些文件(或者模块)会引入到bundle.js中。webpack会给每个模块一个唯一的id
,然后会在bundle.js中保存访问这些模块的id。刚开始的时候只有入口文件被执行,当碰到require的时候就会加载依赖。
四、使用第一个加载器
在目录中新建一个css文件,webpack自己只能处理js文件,需要css-loader
来处理css文件,同时也需要style-loader
去读取css文件中的样式。
安装这些加载器:
npm install css-loader style-loader
安装完成后,会在目录下多了一个node_modules
文件夹,这些加载器就被下载到这里面。
新建style.css文件:
body {
background: yellow;
}
然后编辑入口文件:entry.js
require("!style!css!./style.css");
document.write(require("./content.js"));
此时,重新编译文件,刷新浏览器,会发现背景色变成黄色了。
$ webpack ./entry.js bundle.js
在引入css的时候,我们写了!style!css!
,其实也可以不用写,可以将加载器绑定在webpack的命令中:
require("./style.css");
document.write(require("./content.js"));
然后,执行命令的时候把加载器一起输入:
webpack ./entry.js bundle.js --module-bind "css=style!css"
然后刷新浏览器,会发现结果是一样的。
五、利用配置文件
通过以上的方式,我们每次添加文件,都要写一个规则,然后在编译执行,确实很麻烦,webpack可以通过配置文件来简化这些事情:
新建webpack.config.js
文件,并利用如下规则
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
然后执行命令的时候只需要一个webpack即可:
$ webpack
执行webpack后,会搜索当前目录下的webpack.config.js文件,并加载。
以上的配置文件和之前的代码执行的效果相同,只不过是将规则写入到了一个配置中,可以更方便灵活的进行配置。其实配置也很明朗:入口文件、出口文件、加载器。
六、更漂亮的输出结果
之前有输出结果,不够直观,webpack可以通过几个配置项来美化输出结果:
- 进度条:
progress
如果文件很多,我们需要知道当前正在编译哪个文件,还有颜色
webpack --progress --colors
- 观察模式:
watch
所谓观察模式,即监听模式,如果有文件改变,则自动编译:
webpack --progress --colors --watch
七、开发者服务器
所谓开发者服务是启动webpack提供的服务器,所有的测试在该服务器下进行。需要安装webpack-dev-server
npm install webpack-dev-server -g
然后,启动该服务器即可:
webpack-dev-server --progress --colors
此时,会自动启动一个端口为8080
的服务器,在浏览器中访问:http://localhost:8080
就可以访问了。
如果文件有该改变,代码会自动编译并且自动刷新浏览器。相当于绑定了watch模式。
需要注意的是,访问http://localhost:8080
是无法自动刷新的,需要访问http://localhost:8080/webpack-dev-server/bundle
,你修改文件,该页面会自动刷新。
js学习笔记:webpack基础入门(一)的更多相关文章
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- 《马哥出品高薪linux运维教程》wingkeung学习笔记-linux基础入门课程
计算机原理概念: 1.CPU和内存中的存储单元通信线路称为总线(BUS),总线是被指令和数据复用的,所以也称为前端总线. 2.计算机中计算频率的时间标准即晶体振荡器原理,精确计算时间长度,根据相同的时 ...
- JS学习笔记1_基础与常识
1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...
- Vue.js学习笔记--1.基础HTML和JS属性的使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...
- 006 SpringCloud 学习笔记2-----SpringCloud基础入门
1.SpringCloud概述 微服务是一种架构方式,最终肯定需要技术架构去实施. 微服务的实现方式很多,但是最火的莫过于Spring Cloud了.SpringCloud优点: - 后台硬:作为Sp ...
- Vue.js学习笔记--2.基础v-指令
整理自官网教程 -- https://cn.vuejs.org/ 1. v-bind绑定Class与Style a. 绑定Class 语法:v-bind:class="{classname: ...
- java 从零开始,学习笔记之基础入门<Oracle_基础>(三十三)
Oracle 数据库基本知识 [训练1] 显示DEPT表的指定字段的查询. 输入并执行查询: SELECTdeptno,dname FROM ...
- java 从零开始,学习笔记之基础入门<集合>(十六)
集合 集合:将多个元素放入到一个集合对象中去,对应的集合对象就可以用来存储多元素. Collection接口的子接口:Set接口和List接口. Map不是Collection接口的子接口. Coll ...
- 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案
初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...
随机推荐
- js 检测页面刷新或关闭
window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }
- DTD的作用
在介绍DTD的作用之前先介绍一下SGML:SGML SGML(Standard Generalized Markup Language,标准通用标记语言),是一种定义电子文档结构和描述其内容的国际标准 ...
- Android Service使用拾遗[阿里工程师分享]
Service作为android的四大组件之一常用来帮助我们完成一些需要放在后台处理的任务,通过startService和bindService两种方式被调用.因为Service也是在主线程中运行的, ...
- cmake编译(编译目标)x86或x64
if(CMAKE_CL_64) #CMAKE的内建变量,如果是true,就说明编译器的64位的,自然可以编译64bit的程序 set(ADDRESS_MODEL 64) set(NODE_TAR ...
- POJ_Fibonacci POJ_3070(矩阵快速幂入门题,附上自己写的矩阵模板)
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10521 Accepted: 7477 Descri ...
- jsTree树形菜单分类
这里我演示的jsTree是基于ABP框架 ,展示部分代码,话不多说首先看效果如: 1:引入JS <link href="/jstree/themes/default/style.css ...
- 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号
每个CPU,都有它固定的ID号,ID号就是这个CPU唯一的标识,它可能隐含着CPU的生产日期,版本号,型号等等,那么,在我们的这款友善之臂Tiny4412的板子上,我的这个CPU的ID又是多少呢?从我 ...
- 问题:win7下配置好服务器就是不能查询数据库。(已解决)
我用C写访问mysql的CGI程序,可以执行. 但是,当我写好网页再去访问这个CGI,出现下面的错误 我的环境是:IIS作为服务器,MYSQL数据库,VC++6.0写CGI. 跟踪了一下,发现只要我调 ...
- 20175201课下作业 MyCP
要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为十进 ...
- 线上服务内存OOM问题定位[转自58沈剑]
相信大家都有感触,线上服务内存OOM的问题,是最难定位的问题,不过归根结底,最常见的原因: 本身资源不够 申请的太多 资源耗尽 58到家架构部,运维部,58速运技术部联合进行了一次线上服务内存OOM问 ...