本文共 4375 字，大约阅读时间需要 14 分钟。
webpack是一个模块打包工具
1.webpack不仅支持CommonJS——支持同步依赖
2.而且也支持AMD——支持异步依赖3.webpack只能加载本地的Javascript，通过一系列的加载器可以实现不同静态资源的加载 1.安装使用安装全局 npm install webpack -g本地安装 npm install webpack --save-d 2.用法除了在命令行界面使使用webpack外，也可以直接在代码中使用webpackwebpack --entry entry.js --output bundle.jswebpack --config webpack.config.jswebpack --config webpack.config.js -d：开发模式webpack --config webpack.config.js -w：观察模式webpack --config webpack.config.js -p：生成模式3.案例
index.html<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>entry.jsdocument.write(require("./content.js"));content.jsmodule.exports = "Hello World.";执行命令webpack ./entry.js bundle.js，该命令会编译entry.js和content.js，并合并生成一个bundle.js。4.模块详情---模块定义
moudule.exports CommonJS规范的模块定义,module.exports指定的对象作为模块输出,没有指定的话默认返回一个空对象 module.exports = function doSomething() { // Do something }; 同步的 exports CommonJs规范的模块定义,exports是被输出的对象,如果指定了module.exports,则exports会被忽略 exports.someValue = http://blog.csdn.net/zhbhun/article/details/42; exports.anObject = { x: 123 }; exports.aFunction = function doSomething() { // Do something }; define AMD规范的模块定义 define(value: !Function) value非函数值 define({ answer: 42 }); define([name: String], [dependencies: String[]], factoryMethod: function(...)) 1.name String 可选参数，表示模块名 2.dependencies String[] 可选参数，依赖的模块名数组 3.factoryMethod function 必填参数，该函数要求有个返回值，作为模块的输出 4.define(["jquery", "my-module"],function($, myModule) { // Do something with $ and myModule. // Export a function return function doSomething() { // Do something }; }); 5.不能在异步函数中使用5.模块详情---模块加载 require CommonJS CommonJS规范的require,同步加载指定的模块 webpack编译器会确保客户端执行到这行代码的时候，依赖的模块已经可用，无需向服务器发送请求 实际上webpack就是把需要加载的模块代码和require合并到同一文件里了，所以无需再发送请求获取模块了。 require(dependency: String) require AMD AMD规范的require 异步加载指定的模块——在需要的时候（代码执行到AMD require）才会加载依赖的模块。 require(dependencies: String[], [callback: function(...)]) 6.配置详情 webpack提供了一系列的命令用于控制模块打包 可通过webpack --help查看这些选项。当需要配置较多的选项时，会使webpack命令变得非常臃肿 如：webpack --entry entry.js --output-path ./build --ouput-file bundle.js。 所以webpack提供了一个配置对象简化项目模块打包，在运行webpack命令时候，只要指定这个配置对象即可 webpack --config webpack.config.js webpack.config.js会输出配置对象 例如：module.exports = { entry: "./entry.js, output: { path: "./build", filename: "bundle.js" } }; 观察上面的配置对象，可以发现配置对象本身就是一个模块，而不是JSON，我们可以在配置对象中随意的使用Javascript代码 除了在命令行界面中直接使用webpack，也可以在js代码中使用webpack api var webpack = require("webpack"); webpack({ entry: "./entry.js, output: { path: "./build", filename: "bundle.js" }, callback);7.webpack配置对象：context
webpack处理entry选项时的基础路径（绝对路径），默认值为process.cmd()，即webpack.config.js文件所在路径entry：简介：webpack模块打包的入口，可以给entry赋字符串类型，数组类型和对象类型的值。
可选值： 字符串：字符串指定的模块在项目程序启动的时候加载字符串数组：字符串数组指定的所有模块被当做一个模块集，在项目程序启动的时候都会加载，数组最后一个元素作为模块集输出对象：webpack会打包多个模块集，对象的每个属性名作为模块集的名称，属性值可以是字符串和字符串数组。这个配置可用于实现非单页的程序，程序会有多个启动入口，具体实例可参考multiple entry points。实例：{ entry: { page1: "./page1", page2: ["./entry1", "./entry2"] }, output: { // Make sure to use [name] or [id] in output.filename // when using multiple entry points filename: "[name].bundle.js", chunkFilename: "[id].bundle.js" } }
output：option是个对象类型的值，option下的每个属性都可能会影响webpack模块打包结果。
output.path：字符串类型的值，指定webpack的输出文件路径——要求是个绝对路径output.filenam: 字符串类型的值，指定模块集生成的文件名——在output.path指定的路径下，另外可以在字符串值中使用下列变量 [name]：代表模块集的名称，与entry配置有关，具体可自行测试[hash]：代表编译hash值，与模块集的代码有关，如果模块集的代码有修改，hash值也会变，这个在生成环境里可以解决客户端的缓存问题[chunkhash]：代表模块集名称的hash值，注意chunkhash与hash不能同时使用output.chunckFileName：字符串类型，用于指定非程序入口模块集的文件名称——在output.path指定的路径下，另外可以在字符串值中使用下列变量 [id]: 代表模块集的id[name]: 代表模块集的名称，和require.ensure的第三个参数，具体可以自行测试[hash]: 代表编译hash值，与模块集的代码有关，如果模块集的代码有修改，hash值也会变，这个在生成环境里可以解决客户端的缓存问题[chunkhash]: 代表模块集名称的hash值，注意chunkhash与hash不能同时使用output.sourceMapFilename: SourceMaps的文件名称生成规则output.devtoolModuleFilenameTemplateoutput.devtoolFallbackModuleFilenameTemplateoutput.devtoolLineToLineoutput.hotupdateChunkFilenameoutput.hotUpdateMainFilenameoutput.publicPathoutput.jsonpFunctionoutput.hotUpdateFunctionoutput.pathinfooutput.pathinfooutput.libraryoutput.libraryTargetoutput.sourcePrefixoutput.crossOriginLoadingmodule：用于配置模块加载插件，后面的章节再具体介绍resolveexternalstargetbailprofilecachewatchwatchOptions.aggregateTimeoutwatchOptions.polldebugdevtoolnodeamdloaderrecordsPath, recordsInputPath, recordsOutputPathplugins: 插件注：不得不说webpack的强大，提供如此之多的配置选项，由于精力有限，后续再慢慢维护完善各个配置选项的说明。