webpack以及加载器和plugin的使用

webpack

webpack介绍

传统的开发我们都是在html中引入css,js,图片资源,文件等 当我们项目越来越大时,维护就变得异常困难

比如我们在html引入js文件时,我们还需要考虑文件引入的顺序 当项目大的时候就会变得很困难

webpack就可以帮助我们解决这个问题(weboack是打包工具的一个,但是它是当前最强的)

webpack是一个现代 JavaScript 应用程序的*静态模块打包器(module bundler)。地址：*webpack.docschina.org

• 现代的：相对于CMS项目那种直接在.html中引入.js，.css 文件
• 静态： 文件资源，如.js，.css, .html等
• 模块：node环境, 引入文件, 遵守模块化语法
• 打包： 多个东西装箱数量 变少，体积变小

webpack安装

在node.js环境下 输入命令 npm i webpack webpack-cli -D 因为考虑到不同项目中使用的webpack版本不同, 所以我们不全局安装 并且这是一个开发依赖 所以在命令后面加上-D

输入npx webpack -v来查看版本号验证webpack是否安装成功

注意:

• 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
• npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。

webpack打包文件

使用webpack打包文件首先需要做一些准备工作

1. 改写js代码，让他们有相互引用关系(模块化，导入导出)
2. 使用webpack的打包命令

webpack打包需要被打包的代码有着引用的关系(模块化导入导出)

webpack会根据导入导出关系去"顺藤摸瓜"的去找到这些文件一起打包

tool.js文件

//tool.js文件
// 封装一个工具函数
// 把给指定id的元素设置内容
const updateDom = (id, content) =>{
  document.getElementById(id).innerHTML =  content
}
module.exports = {
  updateDom,
}

main.js文件

const { updateDom } = require('./tool')
updateDom('app', '传统开发：在index.html中引入多个.js文件')

由于现在在index.js使用了require这种模块化的处理方式，属于node的代码 所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错。

我们接下来就需要使用webpack命令来对index.js进行处理了。

webpack打包命令是 npx webpack 要打包的文件

webpack会分析要打包的文件中的引用关系，把相关的文件合成在一起，变成一个.js文件

这是我的文件目录

我们接下来就输入 npx webpack ./src/js/main.js ,webpack会帮我们打包并且默认帮我们生成一个dist文件夹,打包后的文件默认为 main.js

这时我们用index.html引入这个js

打开html会发现js生效了

使用webpack进行打包后,我们就不需要像传统开发那样考虑js引入顺序啊...之类,直接引入最后打包的文件即可

webpack的默认配置文件

工具运行的默认参数配置会放置在某个具体的文件，这个文件就称为配置文件

配置文件的作用

配置文件的作用：给webpack提供参数配置。webpack是一个打包工具，它会按固定格式的配置文件来进行打包

这是webpack打包流程 可以看到 webpack打包首先是找是否在打包命令中指定配置文件 指定就按指定的配置文件走 不指定就检查是否有 webpack.config.js 有的话就按照webpack.config.js里面的配置进行打包 否则才会用内置默认的配置 (也就是打包在dist文件夹下 文件名为main.js)

配置文件的格式

文件的名字：合法的.js文件名就行。一般取名是: webpack.xxxx.config.js

文件的内容：导出一个模块。具体的配置是固定写法

module.exports = {
  配置项1： 值1,
  配置项2： 值2,
  ....
}

使用配置文件

它的格式是：

npx webpack 要打包的文件 --config webpack的配置文件

例如命令：

npx webpack ./index.js --config webpack.dev.js

接下来我们自己尝试一下

我们在当前文件夹下面创建 webpack.config.js 文件进行配置

然后我们再次进行打包

就会在当前文件夹创建一个build文件夹,里面放我们打包好的js文件

打包方式 mode

webpack给mode 提供了两个模式:

● development :开发模式(代码不会压缩 混淆) ● production:生产模式（压缩，混淆，加密....... 不可读）

webpack.config.js中的mode项用来设置打包的方式，如果不设置，会默认为production。

我们上边用的就是生产模式,接下来演示一下开发模式

新建一个文件 webpack.dev.js mode改为development模式

使用这个文件进行打包试试 命令是 npx webpack ./src/js/main.js --config webpack.dev.js

此时原来的文件被覆盖 变成这样的形式

简化打包命令

当涉及多个打包配置要指定时，打包命令比较长，也比较复杂，难以记忆。

可以在package.json中添加script命令来快速启动webpack

配置完成后我们就可以使用简化的命令了npm run 配置的命令名

1. 在script中不再需要添加npx。它会自动在node_modules/.bin中去找命令。

2. 我们就得到了两个可以执行的命令: dev, build 。可以在根目录下的小黑窗中通过:

npm run build, npm run dev 来运行

loader

在webpack看来 一切皆模块，图片，样式文件，js文件.... 。 但是webpack默认只能处理js模块，对于非js的内容，例如css, less文件，图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader(www.webpackjs.com/loaders/)

我们也想要简化其他的文件 所以我们需要 loader (加载器)来帮助我们

官方定义附上 ...

官方定义：

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

loader处理css文件

传统开发：css样式是通过在.html文件中通过link标签引入的。

现代开发：把css文件看做资源，直接在.js文件中导入。

1. 配置文件

此时我在原来的项目src文件夹下加css文件夹,并且配置两个文件

下面，我们修改自已的main.js，在 src/js/main.js中，引入css。

2. 下载css-loader

命令 npm i css-loader -D

1. 配置webpack.config.js

其中mudule是处理非js模块的

rulrs是规则 ,格式都是固定的

1. 打包

打包后引入这个新的js文件,我们发现css样式没有生效 这是为什么呢???

它不会报错。但是，页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码

如果我们希望样式生效，最终在.html文件中有两种情况：

• 有style标签
• 有link标签

而css-loader只是能让你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader

所以我们再来安装style-loade npm i style-loader -D

再来将use里面增加style-loader加载器

在有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程。!!!

所以我们需要将style-loader放在左边,先处理css,然后在将style标签插入html

再次打包来试试

成功了

less-loader

现在开发都是css预处理语言，如果希望处理less文件，则还需要去安装额外的包。

下载命令 npm i less-loader less -D

使用

在rules中添加一个配置，专门针对less文件

然后将这个less文件导入到style.css中

我这边less文件是让字体变为蓝色

成功

处理资源文件

假设在css中引入图片，要怎么处理呢？

src/img 里面我放了两张图片 ,那么我想要引用它该如何引用呢?

好在webpack5已经内置处理方案

还是在rules下进行配置

注意这里不是用use了,用的是type

来运行下

会发现build下多了一张图片,诶,为什么是一张呢??

这是因为

• 大的图片文件(默认是>8K)会拷贝出去
• 小的图片文件会转成base64

其中小图片转为base64的格式编码嵌入在js文件中了 右边的那串编码就是<8k的图片

可以看到我们的页面已经加入了这两张图片

小结

• 一切皆模块，不同的模块有不同的loader

• • css-loader, style-loader, less-loader

• 作用：协助webpack处理非.js模块

• 使用loader的基本步骤是：

• • 第一步：安装包。loader的存在格式也是npm包

• 第二步：配置rules

• • • 不同的loader有不同的配置，要根据文档来
  • 同一资源可以配置多个loader来处理

plugin

plugin介绍

webpack中除了loader之外，还有一个核心概念：plugin，中文就是插件。它可以用来增强webpack的功能。

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建相关的事情。 plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

使用plugin的难点在于plugin本身的配置项，而不是如何在webpack中引入plugin，几乎所有webpack无法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据自己的需要找出相应的plugin。

html-webpack-plugin

作用

把我们自已写的.html文件复制到指定打包出口目录下，并自动引入相关的资源代码。

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。可以生成创建html入口文件

这个意思就是我们每次打包之后还要找到这个html文件,然后在手动引入js文件,那么是不是也挺麻烦

而html-webpack-plugin能将我们的html文件复制到打包的出口目录,并且可以帮助我们自动引入添加相关联的资源代码,不用我们手动引入,

1. 下载

   npm i html-webpack-plugin -D

2. 配置

   1. 引入插件

      const HtmlWebpackPlugin = require('html-webpack-plugin');

   2. 添加一个plugins配置

      

3. 打包

是不是很方便,不得不说,懒促使程序员进步

clean-webpack-plugin

使用clean-webpack-plugin来清空输出目录

问题又来了,如果我们不换导出的文件名字再次来运行 会覆盖原来的文件 但是如果换了名字 则会新增,那么原来的文件是不是就会造成浪费

所以这里我们使用clean-webpack-plugin

1. 下载

   npm i clean-webpack-plugin -D

2. 修改配置文件

   1. 引入

      const { CleanWebpackPlugin } = require('clean-webpack-plugin')

   2. 添加plugins

      plugins:[
              new CleanWebpackPlugin(),
              其它...
      ]
      

      

   3. 打包

      当我运行之后可以看到文件中的txt文件被删除了,其实就是清空了目录又放进去了

   

plugin小结

plugin用来增强webpack能力。

步骤：

1. 下载安装

2. 配置webpack.config.js

3. 1. 引入

4. 添加plugins的设置

其余更多的plugin就等大家自己去探索了

webpack实时打包

实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。

• 项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件
• 现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果

1. 安装

   npm i webpack-dev-server -D

2. 在webpack.config.js中做如下配置

   module.exports = {
       // 其他省略....
     
       // 配置 webpack-dev-server的选项
       devServer: {
           hot: true,
           host: '127.0.0.1',  // 配置启动ip地址
           port: 10088,  // 配置端口
           open: true  // 配置是否自动打开浏览器
           
       }
   }
   

3. 在package.json中补充一个scrip(快捷命令)

   "scripts": {
      "devs": "webpack-dev-server",  
      // 它默认会找webpack.config.js文件
   },
   

4. 启动命令

   现在通过 npm run devs就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。

5. 测试

   • • 修改.js代码，
     • 修改.css代码，检查是否会重启

浏览器看到的实时效果是服务器通过“内存”提供的，没有物理文件，也不会生成dist目录

配置资源大小

如果资源过大可能会爆出警告

可以用下面这个配置代码进行解决

performance:{
        maxEntrypointSize:100000000,
        maxAssetSize:3000000
    }

偷来的面试题

over~