Webpack 入门系列丨初识 Webpack

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 的简单使用

1. 创建一个新的文件夹，test-webpack

2. 创建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 -D

6. 在 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文件。

1.  安装html-webpack-plugin

npm i html-webpack-plugin -D

2. 在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 -D

2. 在test-webpack 终端中，输入npx webpack server

这个时候就在我们的本地起了一个服务，我们在浏览器输入 http://localhost:8080 即可访问我们的项目了

优化三： 我们能不能也像vue项目一样，直接输入npm run dev 启动我们的项目，输入npm run build 对我们的项目进行打包呢？

1. 修改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 前端攻城狮