webpack
2020-02-23 11:21:58 24 举报AI智能生成
webpack脑图
作者其他创作
大纲/内容
mode
development 或 production 之中的一个，来设置 mode 参数
module.exports = {
mode: 'production'
};
module.exports = {
mode: 'production'
};
loader
可以让webpack处理非js文件
将所有类型文件转为webpack能够处理的有效模块
转换某些类型的模块
类型
css-loader
scss-loader
ts-loader
style-loader
plugins
从打包优化和压缩，一直到重新定义环境中的变量
将loader进来的模块文件进行处理
概念
静态打包器(module bundler)
会递归生成一个依赖图
然后将这些模块打包成一个bundle
会递归生成一个依赖图
然后将这些模块打包成一个bundle
webpack 配置是标准的 Node.js CommonJS 模块
通过 require(...) 导入其他文件
通过 require(...) 使用 npm 的工具函数
通过 require(...) 导入其他文件
通过 require(...) 使用 npm 的工具函数
entry
入口起点
可指定一个或多个起点
output
在哪里创建bundle
如何命名文件
默认输出至./dist
模块
ES2015 import export
CommonJS require
CommonJS是nodejs也就是服务器端广泛使用的模块化机制。
该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口
通过 require() 来导入其他模块的输出到当前模块作用域中。
CommonJS 模块系统是同步加载的
该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口
通过 require() 来导入其他模块的输出到当前模块作用域中。
CommonJS 模块系统是同步加载的
AMD define require
AMD（异步模块定义）是为浏览器环境设计的
requirejs即为遵循AMD规范的模块化工具。
RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
requirejs即为遵循AMD规范的模块化工具。
RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
css/less/sass @import
样式（url） 或 <img>
0 条评论
下一页
