webpack的学习笔记(1)

_Gerry_

已于 2024-05-22 18:17:29 修改

阅读量378

点赞数 4

文章标签： webpack 学习笔记

于 2024-05-22 18:13:57 首次发布

本文链接：https://blog.csdn.net/weixin_42770320/article/details/139126461

版权

含义

中文官网的解释

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

webpack的出现是为了解决前端工程化问题的。它会根据我们开发环境中的代码import,require等等去分析对应的一个依赖关系，基于nodejs，去依次读取对应的文件的依赖关系信息，最后形成一个依赖关系图，把依赖的文件代码进行一个合并，最终形成一个文件，这就是webpack的一个大致工作流程。

出现的原因

webpack为什么会出现呢？它是用来解决哪些问题的

在开发时态，我们所希望

模块划分越细越好
支持多种模块化标准
支持npm和其他包管理器下载的模块
能够解决工程化的问题

在运行时态，我们所希望

文件越少越好
文件体积越小越好
代码内容越乱越好
所有浏览器都要兼容
能够解决其他运行时的问题，主要是执行效率问题

我的理解：

因为在开发形态和运行时是存在比较大的差异的，所以我们开发者需要这么一个工具去解决这个问题，能让我们在开发时态去专心写业务相关的代码，可以把模块划分的更细，但是在编译的时候，我们不希望浏览器一次性加载这么多文件，而可以通过工具将我们开发时态的东西进行处理打包成最终的文件，这样就可以使用最终的打包结果，而在开发的时候不需要去考虑这些，这就是webpack构建工具所出现的原因，以及它能解决我们以前传统开发的问题。

Tips:webpack属于构建工具中的一种，市面上也存在着一些构建工具，不过webpack目前还算是主流，生态圈比较大的构建工具

还有其他场景的构建工具

grunt
gulp
browserify
fis

官网

英文文档：https://webpack.js.org/

中文文档：https://webpack.docschina.org/

基本安装和使用

项目初始化

首先需要我们创建一个空的项目文件夹

然后使用命令npm init -y去初始化一个package.json文件，创建完成之后，通过命令进行安装

npm i -D webpack webpack-cli

-D 代表是开发环境下，因为webpack只用于开发环境，生成环境用的是打包后的结果

这里官网例子使用的是，也是一样的意思

npm install webpack webpack-cli --save-dev

中文官网的例子链接：https://webpack.docschina.org/guides/getting-started/#basic-setup

创建入口文件

然后我们在根目录下创建src目录，里面新建一个index.js文件，这里的名字必须是index.js，webpack默认会去找src/index.js文件

hello webpack

然后我们就可以测试一下通过npx webpack去进行一个打包

创建html文件进行测试

打包完之后就会生成dist目录，里面带有main.js的文件，我们在dist目录下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

进行测试

然后我们就可以打开这个页面来查看效果，测试的时候最好使用vscode的live server插件，不要直接以文件形式打开，这样避免后续测试的时候出现一些问题

设置打包的环境

我们每次打包的时候应该会出现一个警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. 
Set 'mode' option to 'development' or 'production' to enable defaults for each environment

这代表我们打包的时候没有指定是生产环境还是开发环境，我们可以通过npx webpack -mode=development的方式来设置为开发环境，开发环境development，生产环境production

配置在package.json里面

    "scripts": {
        "build": "webpack --mode=production",
        "dev": "webpack --mode=development"
    },

这样我们后续在使用的时候可以通过npm run dev和npm run build来指定我们打包的时候是一个什么环境，便于我们切换开发和生产环境