优雅哥学 Webpack - 01 - Webpack 5 快速体验

优雅哥学 Webpack - 01 - Webpack 5 快速体验

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要讲解webpack 5 快速体验

1 初识 Webpack 5

webpack 是一个静态资源的打包工具，会以一个或多个文件为入口，将这一个或多个文件直接或间接使用到的所有文件，组合成一个或多个文件输出。输出的文件就是编译好的文件，通常称其为 bundle，可以在浏览器上运行。Webpack 本身能力有限，在不添加 loader、plugin等扩展时能力有限。至于loader、plugin是什么东西，在后面会介绍。

Webpack 能让前端具有 模块化 和 工程化。关于 webpack，更专业、详细的描述，请看官网描述。

• 官网地址：https://webpack.js.org
• 中文地址：https://www.webpackjs.com

2 初始化项目

2.1 创建目录结构

项目根目录为 Webpack_Learning，创建如下目录如结构。（以斜线/结尾的表示目录）

Webpack_Learning/
|- src/
  |- js/
    |- sum.js
    |- str.js
        |- main.js
    |- template
        |- index.html

2.2 初始化为npm项目

yarn init -y

2.3 安装 webpack 开发依赖

使用 webpack，通常需要安装 webpack 和 webpack-cli。由于只在开发时编译打包使用，故只需要安装为开发依赖即可。

yarn add webpack webpack-cli -D

安装完成后，可以在 package.json 文件中查看版本号：

"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"

2.4 添加编辑器配置文件（可选）

这个步骤非必须，根据自己的喜好就行。由于不同的编辑器有不同的风格，如缩进字符数、末尾是否自动添加空行、缩进使用Tab或空格等，为保持在不同的代码编辑器之间保持代码风格和编码样式一致，出现了一个工具 —— EditorConfig。关于该工具此处不展开，后面会有独立的文章描述。EditorConfig 与 ESLint 相结合，可以最大程度保证团队不同成员之间代码风格一致。常见的主流 IDE （包括 VSCode、WebStorm 等）几乎都支持 EditorConfig。

在项目根目录(Webpack_Learning)下创建 EditorConfig的配置文件：.editorconfig，文件内容如下：

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true

3 编写代码

3.1 src/js/sum.js

在该文件中定义并导出一个累加函数。

const sum = (...args) => {
   
  return args