webpack的入门学习

用户2246220511315
111 阅读6分钟

webpack的介绍

webpack只能识别js资源

  • 将浏览器不能识别的语法编译成浏览器可以识别的语法比如，将less转为css、将es6等高级语言转为es5等
  • 每一种转为都需要一个工具，构建工具就是包含这些小工具的。将这些小操作整合成一个一个操作。
  • webpack就是构件工具的一种。webpack是一种构建工具、浏览器不能识别css预处理语言less、也不能识别es6等高级语言 。所以用webpack可以对这些语言进行处理，转化为浏览器可以认识的语言。在入口文件中引入依赖的文件形成chunk代码块，根据入口文件的依赖关系，将资源全部引进来，形成chunk代码块，根据chunk对不同的资源进行处理，也就是将资源处理为浏览器可以识别的语言，chunk处理的过程叫打包。打包完成的输出的文件叫bundle。

image.png

webpack的5个核心概念

image.png

image.png

修改loader

image.png

image.png

webpack初体验

image.png

image.png

webpack打包样式资源

image.png

image.png 在测试阶段都会用开发模式，因为生产模式会将代码进行压缩 image.png

image.png image.png

image.png

image.png

打包html资源

image.png

image.png

image.png

image.png template:就是将资源打包到他的路径下的文件。也就是复制'./src/index.html'文件，这个文件并自动引入打包输出的所有资源

打包图片资源

image.png

image.png

image.png

处理html中的img

  • 使用url-loader处理图片，但是url-loader默认处理不了html中的img图片，所以引入html-loader处理img图片，它负责将图片引入进来（通过commmonjs的方式引入），然后url-loader进行处理，url-loader使用的是es6的moudel，为了统一引入方式，将url-loader的moudel关了。使用commonjs去解析
  • 当webpack打包时遇到同一个文件，并不会重复打包，只会打包一次 image.png

image.png

image.png

打包其他资源

  • 不需要做任何处理，只需要原封不动的将他输出出去就可以了。

image.png

image.png

devserve自动打包

  • 自动编译，自动刷新浏览器 image.png

image.png

提取css文件成单独文件

image.png

image.png image.png

css的兼容性处理

image.png

image.png

image.png

image.png

image.png

压缩css

image.png

image.png

js的语法检查eslint

image.png

image.png

image.png

image.png

image.png

image.png

js兼容性处理eslint

  • 会将es6语法转化为es5及es5以下的语法

image.png

image.png

基本的兼容性处理

image.png

image.png

全部的兼容性处理

image.png

image.png

image.png

按需加载兼容性

  • 使用按需加载兼容性就不能使用加载全部的兼容性 image.png

压缩html和js

image.png

image.png

image.png

生产环境基本配置

对css的处理

image.png

image.png

less转为css

image.png

css的兼容性处理

image.png

image.png

image.png

css代码生成一个单独文件

css代码加入到js代码中

image.png

image.png

压缩css代码

image.png

image.png

复用loader

image.png

image.png

对js代码的处理

js的语法检查eslint

image.png

image.png

image.png

js兼容性处理

image.png

image.png

image.png

js压缩

将mode的值为production，自动压缩js代码

处理图片

image.png

处理html

image.png

image.png

image.png

image.png

处理其他文件

image.png

性能优化

image.png

开发环境性能优化

image.png

优化开发环境打包速度HMR

image.png

image.png

image.png

image.png

image.png

image.png

调试代码 source-map

  • inline 和eval代表内联，其他都是外部的
  • 内联就是 sourcemap文件会和js文件放在一起，内联一般用于开发模式，速度更快，内联会内联到js中，会导致js文件变得相当大。为了减少js的体积，生产内环境用外联。
  • 外部就是单独分隔开一个map文件，一般用于生产模式。
  • hiddlen和nosource表示隐藏源代码，一般用于生产环境，nosource表示完全隐藏，hidden（半隐藏）是隐藏源代码，构建后的代码还是可以看到的
  • cheap：sourcemap会默认记录行和列，cheaap只会精确到某一行，打包速度更快了，
  • moudel就是加一些webpack中其他的东西，用moudel打包速度会慢一些，不用打包速度快一些， image.png image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

oneOf

  • 正常来讲，一个文件是要被所有loader都过一遍的，当然有些loader处理不了这个文件，但是有些loader会被命中，就会处理这个文件 -一个文件只会匹配中oneOf中的一个loader

image.png

缓存

image.png

babel缓存

image.png image.png

文件资源缓存

image.png image.png

chunk的概念
  • 一个入口文件会依赖其他的文件，一个入口文件引入其他依赖，这些依赖文件会跟着入口文件最终形成一个文件，最终的那个文件就叫做chunk（代码块） image.png
webpack生成的hash值
  • 给文件的名字加上webpack打包生成的hash值 image.png
chunkhash

image.png

contenthash

根据文件的内容，内容变了contenthash就变了，不变它也不变 image.png

tree shaking

为了去除在应用程序中没有使用的一些代码，这样能让代码体积变得更小。

image.png

image.png

code split

  • 将打包输出的一个chunk文件，分割成多个文件。这样加载的时候可以并行加载，加载速度更快。还可以按需加载，

image.png

  • 单页面应用对应单入口，多页面应用对应多入口 image.png

image.png

image.png

image.png

懒加载和预加载

  • 懒加载：就是等到你用的时候在加载，但是如果用到的文件体积比较大，用到才加载会让用户等很久。
  • 预加载：等到你用的时候它已经加载好了，并不会阻塞其他资源的加载。但是预加载慎用，兼容性太差 image.png

PWA

  • pwa（渐进式网络应用开发应用程序）:可以让我们的网页像app应用程序一样，离线也可以访问，有兼容性问题

image.png

image.png

image.png

image.png

image.png image.png

多进程打包

  • thread-loader是给babel-loader使用的

image.png

image.png

image.png

externals

  • 作用：防止将某一些包，打包到我们最终输出到bundles中，比如我们用到了jquery这个依赖，我们希望它通过cdn链接进来的，这时候就通过external给他禁止掉。就是jquery不会被打包了，那么我们就从cdn链接去使用这个jquery

image.png

image.png

Dll动态连接库

  • 它类似externals，可以指示webpack那些库是不参与打包的，但是它可以对某些库单独打包，将·多个chunk打包成一个chunk
  • 正常情况下，会将nodemodules中的所有的包会被打包成一个chunk。但是第三库又非常多，如果只打包成一个文件，这个文件的体积就太大了。使用dll可以把这些打包拆开，打包成不同的文件。

image.png

image.png

image.png

image.png

image.png

  • 通过cdn方式引入的话，使用external。 dll是第一次第三库会参与打包，后面第三方库就不会参与打包，而是使用之前的。

entry详解

image.png

image.png

image.png

  • 虽然array是多入口文件，数组中后面的js文件会打包到第一个js文件中，第一个文件默认也是叫main，
  • key是名称，value是文件路径。

image.png

image.png

output详解

publicpath（一般用于生产环境）

image.png

chunkfilename

  • 非入口chunk的名称
  • entry指定的文件就叫入口chunk
  • 只要不是单入口、多入口的，额外的chunk就由chunkfilename命名。
  • 额外的chunk有两种方式，1.通过import语法会将一个文件单独封装成一个chunk。2.通过option将nodemodules中东西分割成单独chunk。这两种方式产生的chunk名字会遵循chunkfilename后面的命名规则

image.png

image.png

image.png

image.png

devserver详解

image.png

image.png

详细配置 optimization

image.png

image.png

image.png

  • runtime的用法：入口文件main.js中引入了很多其他js文件，引入的文件变了，但是main.js文件并没有变化，使用runtime就可以让引入的文件变化以及对应的runtime文件变化，而main.js文件不变 image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝