webpack - day01

模块化: 开发维护方便,按功能分成各个单独的代码块,代码块内有独立的作用域互不影响,通过 module 或 exports对象暴露接口,不污染全局变量;

    模块化的一个直接副作用,把应用程序拆分成多个独立的文件,需要加载多个文件(文件加载时间长

打包工具出现:webpack 及 rullup 是模块打包器,将小块代码编译成合并在一起,附带代码压缩等功能

       rollup 将小块代码编译成大块复杂的代码,例如 library 或应用程序  (es6, 提出 tree-shaking) 

       webpack静态模块打包器,主要目标是将 JavaScript 文件打包在一起,生成静态文件,在浏览器中使用

(模块化解决了怎么写代码的问题;webpack解决了在模块思想下代码合并的问题;)

概念: webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),然后将所有这些模块打包成一个或多个 bundle。

四个核心概念:

  入口 entry     ---> 构建其内部依赖图的开始    默认值 ./src

  输出 output   ---> 哪里输出,以及如何命名这些文件 ./dist

  loader       ---> 转换非js 类型的模块(webpack只理解js文件)

  插件plugins   ---> 扩展webpack自身的功能 (从打包优化和压缩,一直到重新定义环境中的变量)

webpack  (两种使用方法: 终端 或 nodejs)  

    配置文件遵守 CommonJS 规范;  

    导出文件: module.exports = {}

    加载模块: require() 

webpack.config.js  配置文件

posted @ 2020-03-02 02:08  铁塔  阅读(105)  评论(0编辑  收藏  举报