webpack笔记1

最新推荐文章于 2021-10-15 07:30:00 发布

原创最新推荐文章于 2021-10-15 07:30:00 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍 Webpack 的基本概念及使用方法，包括模块打包、加载、配置等核心功能，并提供实际案例帮助理解。

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.youkuaiyun.com/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的强大，提供如此之多的配置选项，由于精力有限，后续再慢慢维护完善各个配置选项的说明。