webpack初步了解

编程入门行业动态更新时间:2024-10-25 02:27:39

webpack初步了解

webpack初步了解
- 构建工具
  - 构建工具的功能
  - 常用的构建工具
- webpack介绍
  - webpack命令
- webpack常用配置介绍
  - 出入口 Entry&Output
    - entry配置
    - output的配置
  - 模块 Module
  - 模块加载（转换）器 Loader
  - loader学习
    - 使用loader的三种方式
    - babel
  - 插件 Plugin
- webpack-dev-server
  - devServer配置项
- webpack插件
  - extract-text-webpack-plugin
- 开发/生产环境打包
- webpack项目中的最佳配置

构建工具

构建工具的功能

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

常用的构建工具

grunt
gulp
fis3(百度)
webpack模块化管理工具，可以对模块进行：
- 压缩
- 预处理
- 按需打包
- 按需加载
- 热加载

webpack介绍

webpack可以看做是模块打包机，它做的事情是：
- 分析你的项目结构，找到JavaScript模块；
- 其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）；
- 并将其转换和打包为合适的格式供浏览器使用；
Webpack和Grunt以及Gulp相比有什么特性
- Webpack和另外两个并没有太多的可比性；
- Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案；
- Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具；
- Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
- Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
webpack特征
- 插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能
- 速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。
- 丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
- 高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。
- 代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。
- 优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。
- 开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
- 使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

webpack命令

webpack 执行一次开发时的编译
webpack -p 执行一次生成环境的编译（压缩）
webpack –watch 在开发时持续监控增量编译（很快）
webpack -d 让他生成SourceMaps
webpack –progress 显示编译进度
webpack –colors 显示静态资源的颜色
webpack –display-chunks 展示编译后的分块
webpack –display-modules 列出打包模块
webpack –display-reasons 显示更多引用模块原因
webapck –display-error-details 显示更多报错信息

webpack常用配置介绍

出入口 Entry&Output

entry：入口
- 关联的很多其他需要打包的文件
output：出口
- path：文件打出的路径，这个path是nodejs内置的方法；
  entry和output配置

entry配置

entry是指需要打包的文件；
entry有几种使用方法：
- 字符串

entry:__dirname+'/src/script/main.js'
//对应
output:{path:__dirname+'/dist/js',filename:'bundle.js'
}

数组

entry:[__dirname+'/src/script/main.js',__dirname+'/src/script/a.js'
]
//对应
output:{path:__dirname+'/dist/js',filename:'bundle.js'
}

对象

entry:{main:__dirname+'/src/script/main.js',a:__dirname+'/src/script/a.js'}
//对应
output:{path:__dirname+'/dist/js',filename:'[name]-[hash].js'
}
//or 
output:{path:__dirname+'/dist/js',filename:'[name]-[chunkhash].js'}

output的配置

output是指打包生成的文件
entry中输入多个chunk时，为确保文件名唯一避免相互覆盖使用占位符命名filename；
三种占位符
- [name]是chunk的name；
- [hash]是本次打包的hash值，hash值相同；
- [chunkhash]是每个chunk的hash值，不同文件同次打包不相同，保证文件的唯一性，只有改变文件中的内容时hash才变化，未做改变的文件hash值不变；