webpack
webpack是前端项目工程化的具体解决方案，是一个现代JavaScript应用程序的静态模块打包器。可以将多种静态资源（js、css、img）转换成一个静态文件，减少了页面的请求，如下图所示：
其主要功能有：提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等强大的功能。
好处：让程序员把工作的重心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。
目前Vue、React等前端项目，基本上都是基于webpack进行工程化开发的。
例子
我们来举个简单的例子：修改div的背景颜色。
首先创建一个名为change-div的项目，再在终端中执行如下代码添加项目版本文件：
npm init -y //添加版本文件
如下图所示：
这时我们就会在项目目录下看到名为package.json文件，再在终端中执行如下代码安装jquery：
npm install jquery -S //安装jquery
其中：-S是--save的简写，作用是在package.json文件中添加dependencies节点，该节点存放项目开发与部署上线都要使用包的版本信息，在package.json文件中，发现会多了以下代码：
"dependencies": {
"jquery": "^3.6.0"
}
这个就是包的版本信息。
在change-div项目创建名为src的文件夹来存放index.html和index.js文件，
index.js文件内容如下：
import $ from 'jquery'
$(function(){
$('div').css('background-color','red')
})
这里我们使用ES6导入语法，导入jQuery并定义jQuery的入口函数修改div的背景颜色。
index.html文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<div>这是div标签</div>
</body>
</html>
代码很简单，首先引入刚才编写的index.js文件，再在body标签中创建一个div标签。
运行index.html文件，如下图所示：
发现div标签的背景颜色没有发生改变，在浏览器控制台中，报了SyntaxError语法错误。这是因为不支持ES6的导入语法。
这时我们可以使用webpack来处理这个错误。
webpack安装在项目中
在终端运行如下代码安装webpack相关的包：
npm install webpack webpack-cli -D
当然我们可以指定webpack webpack-cli包的版本，执行如下代码即可：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
这里我们指定了webpack的5.42.1版本和webpack-cli的4.7.2的版本，在上面的代码中，我们还添加了-D，-D是--save-dev的简写，作用是在package.json文件中添加devDependencies节点，该节点存放只在开发阶段被使用包的版本信息，打开package.json文件，发现多了以下代码：
"devDependencies": {
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2"
}
那么我们怎么知道什么时候使用-S、什么时候使用-D呢？这时我们可以通过npmjs网站查询，在网站中首先你要安装的包，如下图所示：
点击搜索后，找到install，如下图所示：
这时我们就可以根据官网中的安装方法来安装我们要安装的包。
使用webpack
webpack.config.js配置文件
首先在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下基本配置：
module.exports={
mode:'development'
}
其中：mode用来指定构建模式，可选值有development和production，一般情况下：
-
development：打包速度快，体积较大，开发时使用；
-
production：打包速度慢，体积较小，发布上线时使用；
webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，根据配置文件内容来对项目进行打包。
由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。
package.json
编写配置配置后，在在package.json的script节点下 ，新增dev脚本如下：
"dev":"webpack"
在script节点下的脚本，可以通过npm run 执行，例如npm run dev。
注意：dev脚本名可以任意符合语法格式的名称，而webpack必须是webpack。
这里我们的脚本名为dev。
打包构建
在终端中运行如下命令，启动webpack进行项目的打包构建：
npm run dev
如下图所示：
这样就打包成功了，这时会在项目目录中多了一个dist文件夹，文件夹中有个名为main.js的文件，我们只需要在上面的index.html文件引入生成的main.js文件即可正常运行index.html文件。
如下图所示：
最后，我们的项目目录如下：
打包的默认约束
在webpack4.x和5.x的版本中，有如下的默认约定：
-
默认的打包入口文件为src ->index.js
-
默认的输出文件路径为dist->main.js
也就是说当我们的代码文件夹不是src和代码文件名不是index.js时，就会报找不到文件的错误。
这时可以在webpack.config.js中修改打包的默认约定。
自定义打包的入口与出口
在webpack.config.js配置文件中,通过entry节点指定打包的入口，指定要打包哪个文件；通过output节点指定打包的出口，指定生成的文件要存放到哪里，示例代码如下：
const path=require('path') //导入node.js中专门操作路径的模块
module.exports={
entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
output:{
//存放到目录
path:path.join(__dirname,'.dist'), //输出文件的存放路径
//生成的文件名
filename:'bundle.js' //输出文件的名称
}
}
首先导入node.js中专门操作路径的模块，并通过添加entry节点使用path.json方法指定打包文件入口的路径。
好了，webpack基础入门就讲到这里了。
网友评论