webpack

webpack介绍

在网页中会引用哪些常见的静态资源?

  • JS
  • .js .jsx .coffee .ts(TypeScript 类 C# 语言)
  • CSS
  • .css .less .sass .scss
  • Images
  • .jpg .png .gif .bmp .svg
  • 字体文件(Fonts)
  • .svg .ttf .eot .woff .woff2
  • 模板文件
  • .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】

网页中引入的静态资源多了以后有什么问题???

  1. 网页加载速度慢, 因为 我们要发起很多的二次请求;
  2. 要处理错综复杂的依赖关系

如何解决上述两个问题

  1. 合并、压缩、精灵图、图片的Base64编码
  2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;

什么是webpack?

webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;

如何完美实现上述的2种解决方案

  1. 使用Gulp, 是基于 task 任务的;
  2. 使用Webpack, 是基于整个项目进行构建的;
  • 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
  • 根据官网的图片介绍webpack打包的过程
  • webpack官网

webpack安装的两种方式

  1. 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令
  2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

// 经过刚才的演示,Webpack 可以做什么事情???
// 1. webpack 能够处理 JS 文件的互相依赖关系;
// 2. webpack 能够处理JS的兼容问题,把 高级的、浏览器不是别的语法,转为 低级的,浏览器能正常识别的语法

webpack-dev-server工具使用

刚才运行的命令格式: webpack 要打包的文件的路径 打包好的输出文件的路径
使用 webpack-dev-server 这个工具,来实现自动打包编译的功能

  1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
  2. 安装完毕后,这个 工具的用法, 和 webpack 命令的用法,完全一样
  3. 由于,我们是在项目中,本地安装的 webpack-dev-server , 所以,无法把它当作 脚本命令,在powershell 终端中直接运行;
    (只有那些 安装到 全局 -g 的工具,才能在 终端中正常执行)
  4. 注意: webpack-dev-server 这个工具,如果想要正常运行,要求,在本地项目中,必须安装 webpack
  5. webpack-dev-server 帮我们打包生成的 bundle.js 文件,并没有存放到 实际的 物理磁盘上;
    而是,直接托管到了 电脑的内存中,所以,我们在 项目根目录中,根本找不到 这个打包好的 bundle.js;
  6. 我们可以认为, webpack-dev-server 把打包好的 文件,以一种虚拟的形式,托管到了 咱们项目的 根目录中,虽然我们看不到它,
    但是,可以认为, 和 dist src node_modules 平级,有一个看不见的文件,叫做 bundle.js
posted @ 2019-12-06 09:23  xidianzxm  阅读(195)  评论(0编辑  收藏  举报