乐趣区

关于前端:webpack与构建发展简史

前言

最近十年,随着手机 挪动平板和可穿戴设施的疾速遍及,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 目录创立软连贯

退出移动版