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

10次阅读

共计 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 等等。

从 GitHub stars 和周下载量能够得悉，webpack 远远超过其余构建工具。
除此，webpack 社区生态丰盛：提供丰盛的插件和 loader。配置灵便和插件化拓展：能够定义本人的 loaders 和插件来满足团队个性化的须要。另外，webpack 从最后 1.0 到当初 5.x，官网迭代更新很快。

webpack 默认的配置文件：webpack.config.js
也能够通过 webpack –config 指定不同环境下应用的配置文件的名称

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

{
  "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 目录创立软连贯

正文完