- webpack概述
- 入口起点(Entry Points)
- 输出(Output)
- 模块(Mode)
- 加载器(Loaders)
- 插件(Plugins)
- 配置(Configuration)
- 模块(Modules)
- 模块解析(Module Resolution)
- 依赖图表(Dependency Graph)
- 文件清单(Manifest)
- 构建目标(Targets)
- 模块热替换(Hot Module Replacement)
- 第二部分:配置
- 使用不同语言进行配置(Configuration Languages)
- 多种配置类型
- 入口和上下文(Entry and Context)
- 输出(Output)
- 模块(Module)
- 解析(Resolve)
- 插件(Plugins)
- 开发中 Server(DevServer)
- 开发工具(Devtool)
- 构建目标(Targets)
- Watch 和 WatchOptions
- 外部扩展(Externals)
- 性能(Performance)
- Node
- 统计(Stats)
- 其它选项(Other Options)
- 第三部分:API
- 命令行接口(CLI)
- 包含统计数据的文件(stats data)
- Node.js API
- 模块热替换(Hot Module Replacement)
- 加载器 API
- 模块方法(module methods)
- 模块变量(module variables)
- Plugin API
- compiler 钩子
- compilation 钩子
- resolver
- parser
- 第四部分:指南
- 安装
- 起步
- 管理资源
- 管理输出
- 开发
- 模块热替换
- Tree shaking
- 生产环境构建
- 代码拆分(Code Splitting)
- 懒加载(Lazy Loading)
- 缓存(Caching)
- 创建库 (Library)
- Shimming
- 渐进式网络应用程序
- TypeScript
- 迁移到新版本
- 使用环境变量
- 构建性能
- 内容安全策略
- 开发 - Vagrant
- 管理依赖
- Public Path(公共路径)
- 集成(Integrations)
- 第五部分:加载器
- babel-loader
- yaml-frontmatter-loader
- cache-loader
- coffee-loader
- coffee-redux-loader
- coverjs-loader
- css-loader
- exports-loader
- expose-loader
- extract-loader
- file-loader
- gzip-loader
- html-loader
- i18n-loader
- imports-loader
- istanbul-instrumenter-loader
- jshint-loader
- json-loader
- json5-loader
- less-loader
- bundle-loader
- multi-loader
- node-loader
- null-loader
- polymer-webpack-loader
- postcss-loader
- raw-loader
- react-proxy-loader
- restyle-loader
- sass-loader
- script-loader
- source-map-loader
- style-loader
- svg-inline-loader
- thread-loader
- transform-loader
- url-loader
- val-loader
- worker-loader
- mocha-loader
- 第六部分:插件
- AggressiveSplittingPlugin
- ZopfliWebpackPlugin
- BannerPlugin
- ClosureWebpackPlugin
- CommonsChunkPlugin
- ComponentWebpackPlugin
- CompressionWebpackPlugin
- ContextReplacementPlugin
- CopyWebpackPlugin
- DefinePlugin
- DllPlugin
- EnvironmentPlugin
- EvalSourceMapDevToolPlugin
- ExtractTextWebpackPlugin
- HashedModuleIdsPlugin
- HotModuleReplacementPlugin
- HtmlWebpackPlugin
- BabelMinifyWebpackPlugin
- IgnorePlugin
- LoaderOptionsPlugin
- MinChunkSizePlugin
- ModuleConcatenationPlugin
- NamedModulesPlugin
- NormalModuleReplacementPlugin
- NpmInstallWebpackPlugin
- PrefetchPlugin
- ProfilingPlugin
- ProvidePlugin
- SourceMapDevToolPlugin
- SplitChunksPlugin
- UglifyjsWebpackPlugin
- WatchIgnorePlugin
- I18nWebpackPlugin
模块变量(module variables)
本章节涵盖了使用 webpack 编译的代码中所有的变量。模块将通过 module
和其他变量,来访问编译过程中的某些数据。
module.loaded
(NodeJS)
false
表示该模块正在执行, true
表示同步执行已经完成。
module.hot
(webpack 特有变量)
表示 模块热替换(Hot Module Replacement) 是否启用,并给进程提供一个接口。详细说明请查看 模块热替换 API 页面
module.id
(CommonJS)
当前模块的 ID。
module.id === require.resolve("./file.js")
module.exports
(CommonJS)
调用者通过 require
对模块进行调用时返回的值(默认为一个新对象)。
module.exports = function doSomething() {
// 做一些操作……
};
W> 无法在异步函数中访问该变量
exports
(CommonJS)
该变量默认值为 module.exports
(即一个对象)。 如果 module.exports
被重写的话, exports
不再会被导出。
exports.someValue = 42;
exports.anObject = {
x: 123
};
exports.aFunction = function doSomething() {
// Do something
};
global
(NodeJS)
process
(NodeJS)
__dirname
(NodeJS)
取决于 node.__dirname
配置选项:
false
: Not definedmock
: equal "/"true
: Node.js __dirname
如果在一个被 Parser 解析的表达式内部使用,则配置选项会被当作 true
处理。
__filename
(NodeJS)
取决于 node.__filename
配置选项:
false
: Not definedmock
: equal "/index.js"true
: Node.js __filename
如果在一个被 Parser 解析的表达式内部使用,则配置选项会被当作 true
处理。
__resourceQuery
(webpack 特有变量)
当前模块的资源查询(resource query) 。如果进行了如下的 reqiure
调用,那么查询字符串(query string)在file.js
中可访问。
require('file.js?test')
file.js
__resourceQuery === '?test'
__webpack_public_path__
(webpack 特有变量)
等同于 output.publicPath
配置选项.
__webpack_require__
(webpack 特有变量)
原始 require 函数。这个表达式不会被解析器解析为依赖。
__webpack_chunk_load__
(webpack 特有变量)
内部 chunk 载入函数,有两个输入参数:
chunkId
需要载入的 chunk id。callback(require)
chunk 载入后调用的回调函数。
__webpack_modules__
(webpack 特有变量)
访问所有模块的内部对象。
__webpack_hash__
(webpack 特有变量)
这个变量只有在启用 HotModuleReplacementPlugin
或者 ExtendedAPIPlugin
时才生效。这个变量提供对编译过程中(compilation)的 hash 信息的获取。
__non_webpack_require__
(webpack 特有变量)
生成一个不会被 webpack 解析的 require
函数。配合全局可以获取到的 require 函数,可以完成一些酷炫操作。
DEBUG
(webpack 特有变量)
等同于配置选项中的 debug
。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论