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