阅读 722

webpack学习笔记(一):初次见面,请多关照

前言

最近想搞一个个人博客网站。于是,在GitHub上面找别人做过的项目模板,拿来做个参考。然后,发现他们的项目组织方式似乎不是直接用react脚手架来创建的。几经周折后,发现了其中的奥秘。大家都采用webpack来对自己的工程进行打包。于是,踩坑姐就开始学习webpack的旅途。
在学习一个新的东西之前,首先要搞明白这个东西是什么,拿来干啥的;然后要搞清楚的问题是它怎么用的;最后要明白内部的实现机制是什么。鉴于踩坑姐刚接触webpack,这篇文章中就只介绍两个问题:

  • 什么是webpack ------------------------是什么
  • 如何创建webpack工程-------------------用起来

webpack是什么?

在webpack官网的官方文档上,关于webpack的描述是这样的

本质上,webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对映射到项目所需的每个模块,并生成一个或多个 bundle

我感觉官网上面的说明其实已经说的非常清楚了。但是在这里,我还是想谈一谈自己的理解。从字面上理解,“webpack”可以分成两个部分,一个是“web”,一个是“pack”。显然,web是网站,站点的意思;pack是打包的意思。放一块就是将网站打包或者是打包网站的意思。从字面上也能够看出来,webpack就是一个打包的工具。打包什么东西呢,显然嘛,应用网站的工程。
既然是打包,那必然会有一个打包前和打包后的一个东西了。打包前的内容,我们一般称为源代码或者是资源;而打包后的东西,这里把它叫做“bundle”。我查了一下,bundle这个单词的意思是捆,束。感觉用这个单词来表示打包之后的东西还挺形象的,就是把一串html文件和js代码放到一起,捆成一束的意思了。
看到这里是不是有一种隐隐约约的感觉,这个过程就是C语言编译的过程嘛。一堆*.h*.c文件,通过编译器,变成*.o文件,然后再通过依赖关系连接起来,最后变成一个可执行的应用程序。可是,真的是这个样子的吗?
既然都这样问了,那显然不是了。从最终的结果来看,也能够发现。通过webpack打包之后的输出文件,扩展名还是.js.html,然而编译就不一样了,编译后的扩展名已经变成了其他,不再是原来的.c.h.
在大概知道webpack是什么东西之后,接下来还应该了解一下webpack中的几个核心的概念:

  • 入口(entry):这里有一个入口起点(entry point)的概念。该属性指示webpack应该使用哪个模块,来作为构建起内部依赖图的开始
  • 输出(output):该属性告诉webpack在哪里输出他所创建的bundle
  • loader:webpack只能够处理JavaScript和JSON文件。而loader使得webpack能够处理其他类型的文件,并且将其转化为有效的模块
  • 插件(plugin):可以执行范围更广的任务,比如打包优化,资源管理,注入环境变量
  • 模式(mode):有三个参数development|production|none,用来配置不同环境下的优化
  • 浏览器兼容性(browser compatibility):由于webpack打包后的工程是运行在浏览器端的,需要考虑浏览器的兼容问题
  • 环境(environment):webpack的运行环境

创建webpack工程

开始创建工程

  1. 创建工程文件夹

创建一个webpack工程的过程和利用脚手架创建react工程的过程有一点区别。利用脚手架创建的第一步是全局安装create-react-app,然后利用create-react-app来进行工程的创建。然而,创建webpack工程则是先创建工程目录,然后利用npm命令进行初始化。在Windows命令提示框中或者VScode终端中输入的命令如下:

mkdir webpack-demo
cd webpack-demo
npm init -y

通过最后一行命令生成一个package.json文件,该文件中包含了新创建工程项目的基本信息。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
复制代码

在该文件中,有几个地方是需要关注一下的,"scripts"中包含的是一些输入到命令提示框中的命令;"main"定义了webpack打包的入口起点。

  1. 在本地安装 webpack 和 webpack-cli

使用npm命令在本地安装webpack和webpack-cli

npm install --save-dev webpack webpack-cli

安装完之后,会在项目根目录下出现一个node_modules文件夹和一个package-lock.json文件,并且在package.json文件中会多出来如下代码:

  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }
复制代码

该代码中的"devDependencies"表示在开发时使用到的依赖库。与之相对应的还有一个"dependencies",表示项目中使用到的依赖库。

第一个bundle

  1. 创建文件目录结构
webpack-demo
| - package.json
| - /dist
    | - index.html
| - /src
    | - index.js
复制代码
  1. 添加 lodash 依赖

npm install --save lodash

  1. 主要代码
  • index.html
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
 </html>
复制代码
  • index.js
import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());
复制代码
  1. 更改package.json文件

去掉"main":"index.js";添加"private":true

  1. 运行打包命令

npx webpack

运行这行命令,可以将入口文件打包,并生成指定的bundle文件。如果运行正常,则使用浏览器打开index.html文件,可以看到“hello webpack”的字样,结果如下图所示。 start-result.png

使用配置文件

  1. 在根目录下,添加webpack.config.js文件
  2. 在webpack.config.js中添加配置
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
复制代码
  1. 运行打包命令

npx webpack --config webpack.config.js

使用 npm script命令

  1. 更新package.json文件:

scripts下面添加:

"build": "webpack"
复制代码
  1. 运行 npm 命令:

npm run build

至此,我们就完成了使用webpack创建工程的全过程。

文章分类
前端
文章标签