一.概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

二.前端模块化

1、传统的开发模式

场景：有一个复杂的页面，需要小明和小红分别开发其中的部分模块。小明和小红分别写了各自的js文件，最后合并引入，小明的js文件为a.js和c.js；小红的文件为b.js。
存在的问题：小明的a.js中的age >= 18 为true，c.js中的 age>=18为false，小明百思不得其解？？？
原因：变量命名冲突/js加载顺序问题（如果先加载c.js再加载b.js也可以解决问题）
解决方案：匿名函数，声明函数立马调用函数，函数具有作用域变量就隔离了，使用return返回需要给别人访问的成员
- (function() {})()
- (function(){}())
```
// a.js
const moduleA = (function() {var name = '张三'var age = 20if(age >= 18) {console.log('成年人');}return {name,age}
})()
```
```
// b.js
const moduleB = (function() {var age = 10return {age}
})()
```
```
// c.js
console.log(moduleA.age);
if(moduleA.age >= 18) {console.log('成年人');
}
```
  三、webpack配置文件
  
  每次都要输入打包的文件和生成后的地址，比较麻烦，可以使用webpack的配置文件
- 新建文件【webpack.config.js】
- 配置文件
- require('path'),node自带的一个模块,用来处理路径
  
  entry:入口函数,要处理文件
  
  output:出口,输出文件的位置
  
  resolve()拼接路径
  
  __dirname:node环境全局变量,当前文件的绝对路径
- 使用终端进入项目根目录，输入命令【webpack】，webpack会自动查找目录下的webpack.config.js文件，读取里面的配置进行打包
- ######
  
  四、项目管理文件
  
  前面的命令默认去全局配置的找运行依赖，但是一个项目应该有属于自己项目的依赖，而且项目使用了哪些依赖应该记录下来
  
  使用命令初始化【npm init】package.json文件
- dependencies：生产环境下，项目运行所需依赖。
- devDependencies：开发环境下，项目所需依赖。
- scripts：执行 npm 脚本命令简写，比如"start": "xxx xx", 执行 npm start 就是运行 "xxx xx"。
- 对于webpack本身来说是不具备这些转化功能的，这时候必须使用对应的loader进行处理
  
  大部分的loader都可以在webpack的官网中找到，并且学习相应的用法
  
  如何使用？？？
- 通过npm安装需要使用的loader
- 在webpack.config.js的modules关键字下进行配置
- 五、webpack的loader
  
  我们使用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖
  
  在实际项目中不仅仅有js文件，还有css、图片，ES6转化ES5，TypeScript转化ES5代码，将less，scss转化css，将jsx，vue文件转化js文件等

5月末跟大家讲讲webpack（生日篇）相关推荐

webpack基础篇（三）：管理资源（image、css、fonts、csv、json5）
目录 1. 处理资源 - loader 1.1 加载css - css-loader 1.2 处理less - less-loader 2. 加载css 2.1 抽离css 自定义分类的css文件名 ...
webpack基础篇（五）：代码分离（Code Splitting）
常用的代码分离方法有三种 1. 入口起点问题 2. 防止重复 2.1 配置 entry 提取公用依赖 2.2 SplitChunksPlugin 3. 动态导入 3.1 import() 动态导入 ...
什么是loader? (webpack学习篇4)
什么是loader ? 官方把它定义为:用来将一段代码转换成另一段代码的webpack插件. 同时也给出了解释:虽然本质上说,loader也是插件,但因为webpack的体系中还有一个专门的名词就叫插 ...
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader
说明玩转 webpack 学习笔记支持的语法对样式里面图片引用后面加 __sprite 进行图片合并如何将两张图片合成一张图片? 使用 spritesmith https://github.c ...
6个必须掌握的基础配置 - [webpack第一篇]
webpack实战系列全目录 webpack6个常见的基础配置知识点 webpack 12个常见的实际场景 webpack15个常见的优化策略[敬请期待] webpack从0打造兼容ie8的脚手架[敬 ...
Hot Module Replacement热更新（webpack学习篇9）
模块热替换(HMR - Hot Module Replacement)作用:是指在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完 ...
webpack进阶篇（二十七）：webpack实现SSR打包（下）
说明玩转webpack学习笔记 webpack ssr 打包存在的问题 1.浏览器的全局变量 (Node.js 中没有 document, window) 组件适配:将不兼容的组件根据打包环境进⾏适 ...
初学webpack(第一篇)
作者:房姗链接:https://zhuanlan.zhihu.com/p/24447447 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. webpack是一款很火 ...
webpack优化篇（四十六）：充分利用缓存提升二次构建速度
说明玩转 webpack 学习笔记缓存目的:提升二次构建速度缓存思路: babel-loader 开启缓存 terser-webpack-plugin 开启缓存使用 cache-loader ...
Webpack配置全解析（基础篇）
Webpack凭借强大的功能,成为最流行和最活跃的打包工具,也是面试时高级程序员必须掌握的"软技能":笔者结合在项目中的使用经验,介绍webpack的使用:本文是入门篇,主要介 ...

5月末跟大家讲讲webpack（生日篇）

一.概念

二.前端模块化

1、传统的开发模式

三、webpack配置文件

四、项目管理文件

五、webpack的loader

5月末跟大家讲讲webpack（生日篇）相关推荐

最新文章

热门文章