CoffeeScript前者自动化工具学习–webpack经典8分钟入门

一.什么是 Webpack
Webpack
是贰个模块打包器。它将遵照模块的依赖关系进展静态分析,然后将那个模块依照钦赐的规则变化对应的静态财富。

webpack模式图

二.怎么采用webpack
市面相月经存在的模块管理和打包工具并不适合大型的品种,越发单页面 Web
应用程序。最急迫的原故是哪些在贰个普遍的代码库中,维护种种模块财富的撤销合并和存放,维护它们中间的注重关系,并且无缝的将它们组成到一同生成适合浏览器端请求加载的静态能源。而webpack有以下多少个优点:
1.将凭借树拆分成按需加载的块:Webpack
有二种集人体模型块信赖的办法,同步和异步。异步注重作为分割点,形成二个新的快。在优化了借助树后,每3个异步区块都看成三个文件被包裹。

2.开头化加载的耗费时间尽量少:Webpack 使用异步 I/O
和千家万户缓存提升运维作用,那使得 Webpack
能够以令人怀疑的速度急速增量编写翻译。

3.种种静态财富都足以视作模块:Webpack 自个儿只可以处理原生的 JavaScript
模块,然则 loader 转换器能够将各体系型的财富转换来 JavaScript
模块。那样,任何财富都足以改为 Webpack 能够拍卖的模块。

4.将第贰方库整合成模块的能力:Webpack
有一个智能解析器,大致能够处理任何第贰方库,无论它们的模块方式是
CommonJS、 英特尔 依旧常常的 JS
文件。甚至在加载信赖的时候,允许选取动态表明式 require(“./templates/” +
name + “.jade”)。

5.自定义打包逻辑的力量:Webpack
还有一个作用充裕的插件系统。大多数内容效用都是按照那几个插件系统运转的,还是能够支付和平运动用开源的
Webpack 插件,来满意各式各种的须要。

6.符合大种类,无论是单页依旧多页的 Web 应用

三.安装webpack
先是要设置 Node.js, Node.js 自带了软件包管理器 npm,Webpack 供给Node.js v0.6 以上协助,提议利用最新版 Node.js。

用 npm 安装 Webpack:
$ npm install webpack -g
此时 Webpack
已经设置到了大局环境下,本学科中大家已装好webpack,能够透过命令行
webpack -h 试试。

平凡大家会将 Webpack 安装到花色的重视性中,那样就足以选用项目本地版本的
Webpack。
1.进入项目目录 2.确定已经有 package.json,没有就通过 npm init 创建 3.输入命令 $ npm install webpack --save-dev 安装 webpack 依赖
Webpack 近期有四个主版本,3个是在 master 主干的稳定版,贰个是在
webpack-2
分支的测试版,测试版拥有一些试验性意义并且和稳定版不合作,在标准项目中应有选取稳定版。
<pre>

翻开 webpack 版本新闻

$ npm info webpack

设置钦命版本的 webpack

$ npm install webpack@1.12.x –save-dev
</pre>

四.在项目中央银行使webpack
先是有叁个静态页面 index.html,
<pre>

<html>
<head>
<meta charset=”utf-8″>
</head>
<body>
<script src=”bundle.js”></script>
</body>
</html>
</pre>
未来开创一个 JS 入口文件 entry.js:
<pre>
// entry.js
pico entry.js
// 进入编辑器输入
document.write(‘It works.’);
// 保存并退出
</pre>
下一场编写翻译 entry.js 并打包到 bundle.js,运转命令:
<pre>
$ webpack ./entry.js bundle.js
</pre>
假设成功,打包进度会来得日志:
<pre>
Hash: aeec068c58e1e78f0fb6
Version: webpack 1.12.9
Time: 70ms
Asset Size Chunks Chunk Names
bundle.js 1.48 kB 0 [emitted] main
[0] ./entry.js 87 bytes {0} [built]
</pre>
在点击访问测试将会打开贰个新的窗口。它应当会来得It works.。

注意:下边包车型客车学科中创设编辑文件都以用pico 文件名。
下一步,我们将把部分代码移到多个额外的文书中content.js 并修改入口
entry.js:
<pre>
// content.js
pico content.js
// 编辑内容
module.exports = “It works from content.js.”;
</pre>
<pre>
// 修改entry.js
//document.write(‘It works.’);
document.write(require(“./content.js”)); // 添加content.js
</pre>
编写翻译文件
<pre>
$ webpack ./entry.js bundle.js
</pre>
立异您的浏览器窗口,您应该看到文本It works from content.js.

实践成功,会显得
<pre>
Hash: ef96fed65f6d3ebc0dd7
Version: webpack 1.12.9
Time: 91ms
Asset Size Chunks Chunk Names
bundle.js 1.7 kB 0 [emitted] main
[0] ./entry.js 133 bytes {0} [built]
[1] ./content.js 97 bytes {0} [built]
</pre>
Webpack
会分析入口文件,解析包涵依赖关系的顺序文件。这几个文件(模块)都打包到
bundle.js 。Webpack 会给种种模块分配二个唯一的 id 并经过那一个 id
索引和访问模块。在页面运行时,会先执行 entry.js
中的代码,别的模块会在运作 require 的时候再实践。

五.Loader介绍和应用

Webpack 自个儿只好处理 JavaScript
模块,即使要处理任何类别的文书,就需求使用 loader 进行更换。

Loader
能够知晓为是模块和能源的转换器,它本身是八个函数,接受源文件作为参数,再次回到转换的结果。那样,大家就足以经过
require 来加载任何项目标模块或文件,比如 CoffeeScript、 JSX、 LESS
或图片。

loader 有以下这一个特色:
<pre>
1.Loader 能够通过管Doug局链式调用,每一个 loader
能够把能源转换来任意格式并传递给下3个 loader ,但是最终2个 loader
必须重回 JavaScript。
2.Loader 得以协同或异步执行。
3.Loader 周转在 node.js 环境中,所以能够做别的恐怕的事务。
4.Loader 足以承受参数,以此来传递配置项给 loader。
5.Loader 足以透过文件扩充名(或正则表明式)绑定给分裂类型的公文。
6.除了通过 package.json 的 main 钦点,平日的模块也足以导出叁个 loader
来接纳。
7.Loader 得以访问安插。
8.插件能够让 loader 拥有更加多特点。
9.Loader 得以分发出附加的轻易文件。
</pre>

大家想要在使用中添加2个css文件。

WebPACK只可以处理JavaScript本身,所以大家供给css-loader去处理
CSS。大家还索要style-loader去应用那么些样式在CSS文件。

安装 loader:
<pre>
npm install css-loader style-loader
</pre>
注意:安装 loaders(只须求在该地安装,不需 -g)将会成立一个node_modules 文件夹,在何地 loaders 将会激活。

咱俩要在页面中引入二个 CSS 文件 style.css,首页将 style.css
也作为是一个模块,然后用 css-loader 来读取它,再用 style-loader
把它插入到页面中。

累加一个style.css文件
<pre>
body {
background: blue;
}
</pre>
修改 entry.js:
<pre>

  • require(“!style!css!./style.css”); // 载入 style.css
    document.write(require(“./content.js”));
    </pre>

重复编写翻译并立异您的浏览器看到鲜红背景。

恢宏名自动绑定loader
假若每一趟 require CSS 文件的时候都要写 loader 前缀,是一件很麻烦的业务。

我们可以依照模块类型(扩充名)来机关绑定须要的
loader那样写require(“./style.css”)。

修改entry.js
<pre>

  • require(“!style!css!./style.css”);

  • require(“./style.css”);
    document.write(require(“./content.js”));
    </pre>
    在意:-表示那行删掉恐怕注释掉,+表示新增的始末。
    编译:
    <pre>
    webpack ./entry.js bundle.js –module-bind “css=style!css”
    </pre>
    瞩目:!在shell中有例外意义,须求转义,那样写才会成功的
    <pre>
    webpack ./entry.js bundle.js –module-bind “css=style!css”
    </pre>

六.布置文件
Webpack
在执行的时候,除了在命令行传入参数,还足以由此点名的安插文件来推行。暗中同意情状下,会寻找当前目录的
webpack.config.js 文件,这么些文件是1个 node.js 模块,再次回到一个 json
格式的陈设消息指标,或然通过 –config 选项来钦定布署文件。

小编们想将安插选项移动到布署文件中,创造二个安排文件 webpack.config.js:
<pre>
module.exports = {
entry: “./entry.js”,
output: {
path: __dirname,
filename: “bundle.js”
},
module: {
loaders: [
{ test: /.css$/, loader: “style!css” }
]
}
};
</pre>
方今大家无非运转:
<pre>
webpack
</pre>
要是形成成功,将会回来运营结果,该命令将尝试WebPACK当前目录中加载文件webpack.config.js。

此处对Webpack的打包作为做了安排,主要分为多少个部分:

entry:钦点打包的输入文件,每有一个键值对,正是二个进口文件
output:配置打包结果,path定义了出口的文书夹,filename则定义了打包结果文件的称号
module:定义了对模块的处理逻辑,那里能够用loaders定义了一文山会海的加载器,以及部分正则。当须要加载的文书匹配test的正则时,就会调用前边的loader对文件进行拍卖,那多亏webpack强大的原故。

完美的出口
若果该项目标滋长,编写翻译恐怕需求更长的年月。所以我们要显示一些进程条。大家想要的颜色…

咱俩能够如此
<pre>
webpack –progress –colors
</pre>

七.插件
插件能够形成更加多 loader 不可能成功的法力。

插件的应用相似是在 webpack 的布局消息 plugins 选项中钦定。

Webpack 本人内置了部分常用的插件,仍能透过 npm 安装第2方插件。

接下去,大家运用三个最简便易行的 BannerPlugin
内置插件来推行插件的布署和周转,那个插件的效益是给输出的文件底部添加注释音信。

修改 webpack.config.js,添加 plugins:
<pre>
var webpack = require(‘webpack’);
module.exports = {
entry: ‘./entry.js’,
output: {
path: __dirname,
filename: ‘bundle.js’
},
module: {
loaders: [
{test: /.css$/, loader: ‘style!css’}
]
},
plugins: [
new webpack.BannerPlugin(‘This file is created by mutouren’)
]
}
</pre>
下一场运营 webpack,打开
bundle.js,能够看出文件底部出现了小编们钦赐的诠释音讯:
<pre>
/*! This file is created by mutouren */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
// 前面代码省略……
</pre>

三个 url-loader
来说,它会将样式中引用到的图片转为模块来处理,使用该加载器须求先实行安装:
<pre>
npm install url-loader
</pre>

修改style.css文件
<pre>
body {
color:#fff;
background: url(‘./logo.png’);
}
</pre>

配置webpack.config.js文件
<pre>
module.exports = {
entry: “./entry.js”,
output: {
path: __dirname,
filename: “bundle.js”
},
module: {
loaders: [
{ test: /.css$/, loader: “style!css” },
{ test: /.(png|jpg)$/, loader: “url?limit=陆仟0” } // 添加到那
]
}
};
</pre>

专注前面那多少个limit的参数,当您图片大小小于那么些范围的时候,会活动启用base64编码图片。

作者们照旧运营
webpack
将会师到背景图片已安装成功。

八.在 Webpack 中动用小名
模块别称定义,方便后续直接引用别称,无须多写长长的地址,比如大家现在想要把scripts/jquery.min.jsjquery压缩文件打包.

别称(resolve.alias) 是 Webpack
的3个布署项,它的机能是把用户的三个请求重定向到另1个途径,例如通过改动
webpack.config.js 配置文件,jquery为小名加入:
<pre>
resolve: {
alias: {
jquery: “./scripts/jquery.min.js”
}
}
</pre>
比如说大家事先不要别称,在entry.js中,想要把jquery打包
<pre>
require(‘./scripts/jquery.min.js’);
</pre>
设置外号,就足以修改为
<pre>
require(‘jquery’);
</pre>
诸如此类待打包的本子中的 require(‘jquery’); 其实就约等于于
require(‘./scripts/jquery.min.js’);
。通过小名的施用在本例中得以减去差不多3/6的时辰。

大家把须要的jquery打包了,但是未来前台页面想要直接用照旧不得以的,供给大家把jquery暴表露来。

你大概在全局中动用了1个减去版本的
jquery,为了修补你能够安装这一个揭破全局加载器
<pre>
npm install expose-loader –save-dev
</pre>

然后像下边那样修改entry.js:
<pre>
require(‘expose?$!jquery’);
</pre>

把$作为别称为jquery的变量暴露到全局上下文中。

如今我们在页面就能够使用$,例如:
<pre>
$(‘h1’).text();
</pre>