前端资源打包工具-WebPack

2016-11-30

JavaScript, 工具

WebPack 是一个前端资源打包工具，借助于Loader它可以将任何前端资源(js/image/css/…)统一转换为原生JS 代码，通过静态分析构建模块之间的依赖关系，将涉及到资源分类打包成不同的模块，这些模块在浏览器，Nodejs 中可以按需进行加载，可提升加载效率。同时，WebPack 的打包也非常高效，Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

1 2	官方文档：http://webpack.github.io/docs/ 中文文档：http://webpackdoc.com/index.html

以上两个文档已经非常全面的阐述了 WebPack 强大的功能，下面针对几个关键点进行实战

解释一切资源：Loaders

由于 WebPack 打包的来源只能是原生 JS 代码，因此许多静态资源(图片/CSS), 非JS写的代码(Coffee 和 JSX)需要以一种转换方式转换成 JS 代码，为此 Loader 应运而生

Loader 作为一个单独的模块，其具有以下几个特征：

链式处理方式，资源可被多个 Loader 相互转化，但最终的结果是 JS
支持同步或异步的处理方式
Function 级别存在，可运行于NodeJS甚至其他的环境中
支持正则表达式等特性，可通过npm来发布

总而言之，Loader 作为一个JS代码的转义器，有任何需要被 WebPack 打包的非原生 JS 资源，都可以通过内置/自定义的 Loader 加以转换，供打包使用

使用方式：npm install xxx-loader --save-dev

Loader列表参考： List of Loaders

丰富的插件：Plugins

在打包过程中，WebPack 还允许借助各种插件，对打包过程、生成的结果进行处理，比如最简单的借助于 UglifyJS 实现压缩和混淆，使用如下命令：

new webpack.optimize.UglifyJsPlugin([options])

即可生成压缩混淆之后的打包文件，同理，内置的插件可以做更多的事情

使用方式：在配置文件中配置

Plugin列表参考： List of Plugin

配置文件：webpack.config.js

在大型项目中，WebPack 通常借助于配置文件 webpack.config.js 将打包过程所需执行的步骤，插件统一进行管理，同时方便发布系统实时监控打包，配置文件的内容通常如下：

//WebPack配置文件
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.optimize.UglifyJsPlugin({
	  mangle: false,
	  compress: false
	}),
	new webpack.BannerPlugin('This file is created by ChenS')
  ]
}

可以看出，entry中配置要打包的文件，output打包之后的文件输出路径，module里配置各种 Loader，以 test 的正则表达式匹配资源文件格式，Loader 传入名称，在plugins里配置各种插件以及选项，比如上述 UglifyJsPlugin 禁用了混淆和压缩，有了这个配置文件，在使用 WebPack时就可以直接运行webpack命令，一切轻松搞定

以上Demo工程可点此下载：node-webpack-demo

总结

WebPack 的基础实战在上面分析完了，更多完整功能用法，请参考WebPack