Vue学习杂记（四）——webpack的基本使用

引言：webpack是有官网的，这里是看黑马的视频总结的，难免有些片面。官网学习也行、看博文学习也可、看视频学习也罢，咱的目的只有一个，就是将东西学到自己会用，至于博客，主要是作为学习的辅助，就和上课记笔记一个道理。

一、什么是webpack？

    如今前端开发对于一个项目的要求是：
（1）模块化：js的模块化，css的模块化，资源的模块化；
（2）组件化：能够复用现有的UI结构、样式以及js行为；
（3）规范化：目录结构、编码风格、接口、文档、部署规范化；
（4）自动化：代码的自动化构建、自动部署、自动化测试。
于是，出现了webpack等一系列的前端项目管理工具。webpack主要是用来将代码压缩、兼容浏览器以及性能优化:

二、如何使用webpack？

2.1 webpack的基本使用

    你如果没有了解过webpack的话，需要你先忘记原来的项目目录构建方式，使用如下一套更加标准的目录构建方式：
    （1）首先，在文件中初始化一个包管理文件package.json，这个文件的主要作用是记录一些你安装的包，比如jQuery等，需要注意的是，这个文件是通过npm 快捷生成的。生成指令为：npm init -y;
    （2）接下来，在项目目录下新建src文件，在文件中新建一个index.html和index.js文件，这时，如果你想要引入JQuery，可以使用 npm i jquery -S
，这个 i 表示的就是install，-S是save ，表示后期代码将会出现在开发模式以及生产模式下。如果使用-D （save-develop）则表示只有开发模式下能使用。
    （3）接下来，安装webpack 打包工具，使用npm方式安装，推荐使用淘宝镜像，切换为淘宝镜像指令为：

npm config set registry http://registry.npm.taobao.org

接下来，修改package.json文件，将name属性随便修改一下：

使用npm安装指定版本：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

说明：由于webpack是一个打包工具因此只用于开发环境。
    接下来配置webpack ，在项目文件中新建一个webpack.config.js，并添加如下代码：

module.exports = {
	mode:'development'
}

说明：这其实是node.js的写法，表示向外到处当前webpack对于代码的处理使用哪种模式，mode只有两个参数，一个是development，一个是production，区别是后者会对代码进行压缩处理。
    （4）webpack安装并配置好环境参数之后，接下来就是使用了，首先需要在package.json中添加代码：

"scripts": {
    "dev":"webpack"
  },

说明：dev表示的是脚本昵称（可变），webpack 即实际需要运行的脚本；
完成之后使用npm run dev 执行webpack，促使webpack对代码打包并生成dist目录和main.js文件，在src的index.html中引入main.js后项目就能展示了。如果想要切换成生产模式，直接将webpack中的配置参数修改为production即可。

---

2.2 webpack的扩展使用

    webpack实际上要比上面说的更复杂一些，上面只是介绍了webpack的基本使用方法。接下来，说明一些其他自定义模块：
（1）自定义webpack打包的入口文件和出口文件（利用webpack对test.js进行打包）：

(2)webpack-dev-server插件，功能：可以用来自动刷新页面。对于webpack而言，每次修改代码都需要进行打包处理。webpack-dev-server会启动一个实时打包的http服务器，能够在我们保存代码时重新对代码进行打包处理，安装方法如下：

npm install webpack-dev-server@3.11.2 -D

安装之后将webpack.config.js里面scripts脚本"dev"改成"webpack serve"，运行报错如下：

解决方法，重新安装一下webpack-cli：

npm i webpack-cli -D

    接下来，有意思的情形出现了，实际上并没有出现我们想要的功能（不能够实现实时刷新）。原因：http服务器帮助我们打包生成的main.js文件(dist目录下默认的那个文件)其实并没有被写入磁盘，而是写入到了虚拟内存中。这个其实是可以理解的，因为http服务器监听ctrl+S，如果频繁按Ctrl+s将可能导致频繁读写磁盘，影响磁盘的性能，因此采用的是虚拟内容。
    回到webpack打包提示上来，会发现这个output的位置是在根目录下！！这其实就是虚拟内存中main.js文件的位置，不同于我们设置在磁盘中的dist/main.js文件

解法：修改html文件引入的js文件，将原来使用的磁盘文件修改成虚拟内存中的文件，解决！！
(3)html-webpack-plugin插件，功能：我们发现，如果要访问webpack打包生成的文件，首先需要进入到http://loclhost:8080然后手动点击src才能访问到html文件。
    现在，我希望我能够直接访问html文件，不需要再自己手动点击进入src目录了。但是，由于前端文件目录结构规范的约束，我们不能直接删除src目录。这个插件便能实现将src中的文件复制到根目录下，并且还能够注入js文件。
    具体使用如下：

npm install html-webpack-plugin@5.3.2 -D

安装之后在webpack配置文件中增加如下内容：

const HtmlPlugin=require('html-webpack-plugin');//导入html-webpack-plugin模块
const htmlPlugin=new HtmlPlugin({
	template:'./src/index.html',//临时文件
	filename:'./index.html'//写入虚拟内存中
});
module.exports = {
	mode:'development',
	plugins:[htmlPlugin],//使用组件
}

从这里可以看出，html-webpack-plugin帮我们注入了webpack生成的main.js文件：

（4）devServer配置项（本质属于webpack-dev-server），常用配置如下：

devServer:{
	open:true, //项目构建成功后打开浏览器
	port:8080,//项目运行的端口号
	host:'127.0.0.1',//加载后的服务器地址
	hot:true//热加载指的是对于模块的修改不会影响其他模块
}

说明：host只能是localhost或者是’0.0.0.0’，端口可以自定义，但是不能与当前正在使用的端口冲突，hot热加载的触发需要引入webpack，并且导入如下热更新插件：

new webpack.HotModuleReplacementPlugin()