Webpack 入门系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
如今的前端技术层出不穷，比如 sass、less、ts、vue、react等，很大程度上提高了我们的开发效率，也使得我们的项目结构更加清晰，更好的维护。
但是浏览器并不能直接识别这些文件，我们需要使用工具将这些高级的代码转换成最基本的HTML、CSS、JavaScript，浏览器才可以正常执行，这样的工具叫做构建工具，或者称之为打包器。
webpack是基于一个入口文件，从入口进行一层一层的访问，形成了一个依赖图，图中的每一个节点都是一个模块，最终会生成一个叫做bundle的包，这个bundle的包，就是最终的构建产物，直接在浏览器中运行就可以了。
webpack 已是一名前端工程师必备的技能，现在就让我们开始学习 webpack吧！
为什么要用 Webpack
我们先来说说几个传统开发方式的弊端：
当我们按传统的方式进行项目开发的时候，在我们的body标签里常常会引入一大堆的js文件，有的是外部的文件，有的是我们本地的文件。
而且这些文件之间的顺序不同，还可能会产生不同的效果，比如 jquery在window对象上添加了一个叫做JQuery的对象，如果我们在后面的js里改变了这个JQuery对象，那么我们项目中使用的JQuery就不会按照我们的预期进行了。
<!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>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./module1.js"></script>
<script src="./module2.js"></script>
<script src="./module3.js"></script>
</body>
</html>污染全局作用域，我们引入的外部js文件，往往都是像全局对象上添加某些属性，以此实现功能的引入。但是这样，我们就不能再次定义相同的变量了。
对前端高阶技术的不支持，比如Sass文件，浏览器就不支持。我们需要sass编译为css后，浏览器才可以支持。
webpack 的好处：
各个模块按需引入，不存在写多个script标签的情况。
支持tree shaking，用户定义了，但是没有使用的模块，不会打包到最终产物中
各个模块之间相互隔离，变量不会互相冲突
.......
Webpack 的简单使用
创建一个新的文件夹，test-webpack
创建src文件夹，并在src下面创建index.js文件
3. 在 index.js中编写一段简单的js代码
// index.js
console.log('hello webpack')4. 在 test-webpack的终端下，输入npm init -y，生成项目配置文件package.json
5. 在 test-webpack的终端下，安装 webpack、webpack-cli
npm i webpack webpack-cli -D6. 在 test-webpack 的终端下，执行命令 npx webpack
7. 我们会看到，在 test-webpack目录下，会生成一个新的文件夹 dist，并且里面有一个 main.js 文件
8. 然后我们在 test-webpack 的目录下，执行 node ./dist/main.js
至此，我们就使用 webpack 对 src 目录下的 index.js 文件进行了打包，并输出了最终产物 dist/main.js
优化一：此时，我们想要运行打包后的内容，只能通过node来进行，那么如何使用浏览器打开呢？也就是说，我们要生成一个html文件。
安装html-webpack-plugin
npm i html-webpack-plugin -D2. 在test-webpack 目录下，创建webpack.config.js 文件
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // 开发模式
entry: './src/index.js', // 入口文件地址
plugins:[
new HtmlWebpackPlugin() // 引入插件
]
}3. 在test-webpack 终端下，重新执行npx webpack命令，再次进行打包。此时我们可以看到，在dist目录下，出现了一个新的文件 index.html
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="main.js"></script> // 自动帮我们引入了打包后的js文件
</head>
<body>
</body>
</html>
我们在浏览器中打开index.html，并查看控制台的输出。
优化二： 接下来，我们每次打包之后，还要手动的去在浏览器中打开我们的index.html中，有没有方法能代替我们这个工作呢？
1. 安装 webpack-dev-server
npm i webpack-dev-server -D2. 在test-webpack 终端中，输入npx webpack server
这个时候就在我们的本地起了一个服务，我们在浏览器输入 http://localhost:8080 即可访问我们的项目了
优化三： 我们能不能也像vue项目一样，直接输入npm run dev 启动我们的项目，输入npm run build 对我们的项目进行打包呢？
修改test-webpack 目录下的package.json 文件
// package.json
{
"name": "test-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "npx webpack server",
"build": "npx webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
}
}2. 现在我们在终端中，就可以通过输入npm run dev 启动项目，通过npm run build 打包项目了。
webpack 入门教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
叶阳辉
HFun 前端攻城狮
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
