共计 2457 个字符,预计需要花费 7 分钟才能阅读完成。
前言
最近十年,随着手机 挪动平板和可穿戴设施的疾速遍及,web 前端的开发触角也从传统的 PC 网页的开发倒退到多终端的开发,所以咱们就须要同时兼顾 PC H5 等各类不同分辨率的网页开发,因而针对不同的利用场景做不同的打包就显得很重要了。比方针对 PC 端的中后盾利用,咱们须要针对反对单页利用的打包构建,而 H5 页面通常对性能和可拜访性有着极高的要求,因而须要通过 构建反对服务端渲染和 PWA 离线缓存。
再者,当下前端社区里最为风行的三大框架,react、angular、vue,他们的一些语法比方 jsx,vue 指令,这些在浏览器是无奈解析的,也须要通过构建工具进行转换,相熟 webpack 应用和原理能够让你拓宽前端技术栈,再发现页面打包的速度和资源体积的问题时,可能晓得如何排查问题和优化。同时相熟 webpack 原理,有助于对其余跨端利用的开发,比方在对小程序、weex、react native、electron 等框架的打包时,可能疾速上手。
在刚开始接触 webpack 时,对 webpack 的打包理念,所有皆为模块感到困惑,在 webpack 中不仅 js 是模块,其余的 html、css、图片和字体等都能够成为模块,其次,webpack 配置异样灵便,并且具备弱小的插件化扩大能力。上手 webpack 的确是须要理解很多 webpack 外面的泛滥新的概念,entry、output、mode、loaders 和 plugins、热更新、code spliting 和 tree shaking 等等。
为什么须要构建工具?
1、转换 ES6 语法
ES 新的语法在浏览器的反对状况不好,尤其在一些低版本的浏览器。
2、转换 JSX
3、CSS 前缀补全 / 预处理器
4、压缩混同
5、图片压缩
前端构建演变之路
最早的前端开发,咱们都是切图片,而后编写 js 和 css 代码,这些代码是未经压缩的,前面大家意识到代码公布上线心愿代码逻辑不要裸露进去,因而会找一些在线工具,把源代码上传上去,通过在线工具进行压缩,再把压缩后的代码拷贝到本地目录中,这个过程是及其繁琐的。到了 07 年,过后出了 ant+Tool,能够将代码进行本地压缩。下面这种状况是继续了好几年。
再起初,整个业界 requireJs 和 SeaJs 模块化的概念一直催生,因而前端的代码编写的形式,模块化的编写形式也越来越简单,起初又演变出了 grunt,他实质上是一个 Task Runner,grunt 会将整个构建过程分为一个一个的工作,每个工作做一件事件,比方在整个 grunt 外面,会将打包过程分为解析 html、解析 css、解析 js,包含代码压缩和文件指纹等等,他会把这些都算成一个个工作,工作执行实现之后,会把工作执行后果寄存到本次磁盘的目录中,这样势必会导致打包速度慢,因为存在本地磁盘的 IO 操作。因为这个问题,演变出了 gulp,gulp 有文件流的概念,每一个工作的后果不会存在本地磁盘的文件中,而是间接寄存在内存中,在下一个步骤会间接应用上一个步骤的内存,这样会大大提高打包的速度。
现阶段,应用的最多的打包工具是 webpack,除此之外还有 rollup、parcel 等等。
为什么抉择 webpack
从 GitHub stars 和周下载量能够得悉,webpack 远远超过其余构建工具。
除此,webpack 社区生态丰盛:提供丰盛的插件和 loader。配置灵便和插件化拓展:能够定义本人的 loaders 和插件来满足团队个性化的须要。另外,webpack 从最后 1.0 到当初 5.x,官网迭代更新很快。
配置文件名称
webpack 默认的配置文件:webpack.config.js
也能够通过 webpack –config 指定不同环境下应用的配置文件的名称
webpack 配置组成
module.exports = {
entry: './src/index.js',------------------------- 打包的入口
output: './dist/main.js',------------------------ 打包的输入
mode: 'production',------------------------------ 指定打包环境
module: {
rules: [---------------------------------------loader 配置
{test: /\.txt/, use: 'raw-loader'}
],
},
plugins: [--------------------------------------- 插件配置
new HtmlwebpackPlugin({template: './src/index.html'})
]
}module
零配置的 webpack(默认)会指定 entry(’./src/index.js’)和 output(’./dist/main.js’)
环境搭建
装置 Node.js 和 npm
webpack 依赖 Node.js 环境
查看是否装置胜利:node - v 和 npm -v
创立空目录和 package.json 文件
npm init -y
装置 webpack 和 webpack-cli
webpack4 是将 webpack 的内核和 webpack-cli 进行了拆散,因而在理论应用中须要同时装置 webpak 和 webpack-cli
npm install webpack webpack-cli –save-dev
查看装置是否胜利:webpack -v
通过 npm script 运行 webpack
{
"name": "webp",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"build":"webpack"},"keywords": [],"author":"",
"license": "ISC",
"devDependencies": {
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
}
}
原理:模块部分装置会在 node_modules/.bin 目录创立软连贯