webpack初步了解"/>
webpack初步了解
webpack初步了解
- webpack初步了解
- 构建工具
- 构建工具的功能
- 常用的构建工具
- webpack介绍
- webpack命令
- webpack常用配置介绍
- 出入口 Entry&Output
- entry配置
- output的配置
- 模块 Module
- 模块加载(转换)器 Loader
- loader学习
- 使用loader的三种方式
- babel
- 插件 Plugin
- 出入口 Entry&Output
- 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配置
- path:文件打出的路径,这个path是nodejs内置的方法;
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值不变;
模块 Module
module:模块,在 Webpack眼里一切皆模块,默认只识别js文件, 如果是其它类型文件利用对应的loader转换为js模块。
- rules:做很多的规定,比如:加载css、将es6编译成es5;
- “-loader”其实是可以省略不写的,多个loader之间用“!”连接起来
更多推荐
webpack初步了解
发布评论