webpack基本使用

1.执行npm run dev发生了什么？

npm run 其实执行了package.json中的scripts脚本，npm run dev的执行如下：

比如:

 "scripts": {     "dev": "webpack"   }, 相当于执行 "webpack"

2.webpack.config.js 文件的作用

webpack.config.js 是 webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意:由于 webpack是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js 相关的语法和模块进行webpack的个性化配置。

3 webpack中的默认约定

在webpack 4.x和5.x的版本中，有如下的默认约定:

①默认的打包入口文件为src -> index.js

②默认的输出文件路径为dist -> main.js 注意:可以在webpack.config.js 中修改打包的默认约定

4.自定义打包的入口与出口

在 webpaick.config.js 配置文件中，通过entry 节点指定打包的入口。

通过output节点指定打包的出口。示例代码如下:

 5.安装和配置webpack-dev-server插件

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack 用起来更方便。最常用的webpack插件有如下两个:
(1)webpack-dev-server
●类似于node.js 阶段用到的nodemon工具
●每当修改了源代码，webpack 会自动进行项目的打包和构建

安装webpack-dev-server

npm i webpack-dev-server@3.11.2 -D

配置webpack-dev-server

①修改package.json -> scripts中的dev命令如下:   "scripts": {     "dev": "webpack serve"   },

②再次运行npm run dev命令，重新进行项目的打包

③在index.html中引入内存中的bundle.js，因为webpack-dev-server打包后将bundle.js放到了内存，操作更快。

<!-- 加载和引用内存中的bundle.js --> <script src="/bundle.js"></script>

④在浏览器中访问http://localhost:8080=>src=>index 查看自动打包效果

注意: webpack-dev-server 会启动一个实时打包的http服务器

(2)html-webpack-plugin

webpack中的 HTML插件（类似于一个模板引擎插件)
可以通过此插件自定制index.html页面的内容。

在使用webpack-dev-server我们访问http://localhost:8080还需要打开src=>index.html，繁琐，现在需要一个插件，自动跳转到index.HTML。

安装html-webpack-plugin

npm i html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin

 

index.html无需导入<script src="/bundle.js"></script>

访问http://localhost:8080 直接打开的就是index.html

原理：html-webpack-plugin插件作用：

①通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。 ②HTML插件在生成的index.html页面，自动注入了打包的bundle.js 文件。

 6.devServer中常用的选项

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下:

注意:凡是修改了webpack.config.js 配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!

7.webpack中的loader(加载器)

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack 默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!   loader加载器的作用:协助webpack打包处理特定的文件模块。比如:

• css-loader 可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• url-loader file-loader 可以打包处理图片/文件
• babel-loader可以打包处理 webpack 无法处理的高级JS语法

(1)打包处理css/less文件

①安装cssloader

npm i style-loader@3.0.0 css-loader@5.2.6 less-loader@10.0.1 less@4.1.1  -D

②在webpack.config.js 的module => rules数组中，添加loader规则如下:

 

 其中，test表示匹配的文件类型，use表示对应要调用的loader，多个loader用数组，单个loader用字符串即可。

注意:

• use数组中指定的loader顺序是固定的

• 多个loader的调用顺序是:从后往前调用

loader调用过程：

src=>index.js

//1．使用ES6 导入语法，导入jQuery

import $ from ' jquery'

//导入样式(在 webpack中，一切皆模块)

//如果某个模块中，使用from接收到的成员为undefined，则没必要进行接收，即不要返回值,所以省略from

import './css/index.css'

import './css/index.less'

1. webpack 默认只能打包处理.js结尾的文件，处理不了其它后缀的文件

2.由于代码中包含了index.css 这个文件。因此 webpack 默认处理不了

3.当webpack 发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的 loader 加载器。

4. webpack把 index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader),如果有less先交给less-loader,当less-loader处理完毕后会把处理的交过交给css-loader。

5.当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)

6.当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack。

7.webpack把 style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。

 (2)打包处理样式表中与url路径相关的文件

在src=>index.html中新建img标签

<img src="" alt="" class="Box">

在src=>index.js导入图片,并给img标签src属性动态赋值 import logo from './images/one.png' $('.Box').attr('src',logo)

①运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D命令安装与url/文件相关的loader
在webpack.config.js的module => rules数组中，添加loader规则如下:

 

 

 其中?之后的是 loader的参数项:

limit用来指定图片的大小，单位是字节( byte) 只有≤limit大小的图片，才会被转为base64格式的图片

 (3)打包处理js 文件中的高级语法

webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js 语法，需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码: 在src=>index.js新增代码如下：

 

 ①安装babel loader相关的包

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

②配置babel loader相关的包

步骤一：在webpack.config.js的module => rules数组中，添加loader规则如下: 注意:必须使用exclude指定排除项;因为 node_modules目录下的第三方包不需要被打包

步骤二：在项目根目录下，创建名为babel.config.js 的配置文件，定义babel的配置项如下:

 

8.配置webpack的打包发布

在package.json的文件scripts节点下，新增build命令如下:

 

--model是一个参数项，用来指定webpack的运行模式，值为production， 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意:在package.json的文件scripts节点下通过--model指定的参数项，会覆盖webpack.config.js 中的model对象。

 (1)把js文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置:

将filenmae的路径前面加个js/

 

(2)把图片文件统一生成到image目录中

修改webpack.config.js 中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径:

 

 

 (3)配置和使用clean-webpack-plugin插件自动删除dist目录

为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin 插件:

①安装清理dist目录的 webpack插件

npm i clean-webpack-plugin@3.0.0  -D

②在webpack.config.js按需导入插件、得到插件的构造函数之后，创建插件的实例对象

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

③把创建的cleanPlugin 插件实例对象，挂载到plugins节点

9.source Map

什么是Source Map

Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

(1)webpack开发环境下的Source Map

默认 Source Map 的问题

开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下:

 

解决默认Source Map 的问题

开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致:

 (2) webpack 生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。

（3）Source Map的最佳实践

①开发环境下:

●建议把devtool的值设置为eval-source-map

●好处:可以精准定位到具体的错误行

②生产环境下:

●建议关闭Source Map或将devtool的值设置为nosources-source-map

●好处:防止源码泄露，提高网站的安全性

10.webpack中@的原理和好处

 

 

 配置：在webpack.config.js配置如下：

 

 

 11.实际开发中需要自己配置webpack 吗?

答案:不需要!

●实际开发中会使命令行工具（俗称CLI）一键生成带有webpack的项目 

●开箱即用，所有webpack 配置项都是现成的!

●我们只需要知道webpack 中的基本概念即可!