webpack笔记1-阿里云开发者社区

开发者社区> 开发与运维> 正文

webpack笔记1

简介: webpack是一个模块打包工具 1.webpack不仅支持CommonJS——支持同步依赖2.而且也支持AMD——支持异步依赖3.webpack只能加载本地的Javascript,通过一系列的加载器可以实现不同静态资源的加载 1.

webpack是一个模块打包工具

1.webpack不仅支持CommonJS——支持同步依赖
2.而且也支持AMD——支持异步依赖
3.webpack只能加载本地的Javascript,通过一系列的加载器可以实现不同静态资源的加载


1.安装使用
安装全局 npm install webpack -g
本地安装 npm install webpack --save-d


2.用法
除了在命令行界面使使用webpack外,也可以直接在代码中使用webpack
webpack --entry entry.js --output bundle.js
webpack --config webpack.config.js
webpack --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.js
document.write(require("./content.js"));
content.js
module.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.devtoolModuleFilenameTemplate
output.devtoolFallbackModuleFilenameTemplate
output.devtoolLineToLine
output.hotupdateChunkFilename
output.hotUpdateMainFilename
output.publicPath
output.jsonpFunction
output.hotUpdateFunction
output.pathinfo
output.pathinfo
output.library
output.libraryTarget
output.sourcePrefix
output.crossOriginLoading
module:用于配置模块加载插件,后面的章节再具体介绍
resolve
externals
target
bail
profile
cache
watch
watchOptions.aggregateTimeout
watchOptions.poll
debug
devtool
node
amd
loader
recordsPath, recordsInputPath, recordsOutputPath
plugins: 插件
注:不得不说webpack的强大,提供如此之多的配置选项,由于精力有限,后续再慢慢维护完善各个配置选项的说明。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章