前端资源打包工具——webpack

2017-02-19 | 阅读

关于 webpack

webpack是当下最热门的前端模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

服务器端的Node.js遵循 CommonJS规范,该规范的核心思想是模块通过require来加载其他模块,然后通过exportsmodule.exports来导出需要暴露的接口。

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

优点:

  • 服务器端模块便于重用
  • NPM 中已经有将近20万个可以使用模块包
  • 简单并容易使用

缺点:

  • 同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
  • 不能非阻塞的并行加载多个模块

这种规范是同步的模块加载适合服务器端,不适合浏览器。对于异步的模块加载,即Asynchronous Module Definition, 即AMD如下:

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });

在声明模块时,通过define指定所有依赖,并当做形参传到factory函数中。

Common Module Definition 规范和 AMD 很相似,尽量保持简单,并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

webpack

安装 :

npm install webpack -g

使用 , 创建一个静态页面 index.html :

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

创建一个模块 module.js :

// module.js
module.exports = 'It works from module.js.'

创建JS入口文件entry.js:

// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

然后使用webpack entry.js bundle.js 进行打包 ,就可以看到命令行输出打包状况。

Loader

webpack本身只能处理 JavaScript模块,如果需要处理其他类型文件,就需要使用Loader进行转换,Loader可以理解为模块和资源的转换器,其本身是一个函数,接受原文件作为参数,我们可以通过require来加载任何类型的模块或文件。

loader命名一般以xxx-loader的形式,如json-loader,而使用loader时,可以使用短名json .

如我们要引入一个CSS文件,则我们将这个css文件看做一个模块,然后通过css-loader来读取它,然后再用style-loader把其插入到页面中 :

require("!style!css!./style.css") // 载入 style.css

当然,需要先安装两个loader :

npm install css-loader style-loader

Loader是支持管道方式的链式调用,所以这样!style!css!./style.css编写的含义,就是用 css-loader加载style.css文件,然后再用 style-loader将css插入到页面中。

但每次加载css文件都要编写loader前缀是一个麻烦的事,所以我们可以通过模块的扩展名来自动绑定loader, 即我们使用 :

require("./style.css")

但在使用webpack打包时,使用 --module-bind进行绑定:

webpack entry.js bundle.js --module-bind 'css=style!css'

配置文件

webpack可以通过命令行进行详细的配置。默认是当前目录的webpack.config.js .

使用配置文件时,首先要用package.json来配置依赖 :

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "A simple webpack example.",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
  }
}

运行npm install安装依赖

然后创建webpack.config.js文件 :

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}

最后运行 webpack就可以达到之前的效果。

插件

webpack可以通过插件来完成 更多任务,如 :

plugins: [
    new webpack.BannerPlugin('This comment is created by webpack.BannerPlugin')
  ]

BannerPlugin是一个简单地插件,用于在输出文件头部添加注释信息。

可以使用webpack内置的常用插件,也可以通过npm安装一些第三方插件。