Webpack打包流程系列一：打包JS（JavaScript）文件

简易流程创建项目目录，npm init初始化，源码放在src里创建.babelrc文件，设置代码书写规则，将src代码均按规则进行转码到dist文件夹下创建main.js文件，将模块进行集中导入，作为整个项目的入口（在webpack.config.js中设置为入口）创建webpack.config.js文件，设置整个项目的入口，设置项目打包的出口dist/bundle.js创建index.html

努力转码的尼扣

13136人浏览 · 2021-10-31 09:48:43

努力转码的尼扣 · 2021-10-31 09:48:43 发布

前情提示

webpack是什么？
简单而言，webpack是一个模块打包器。它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。
使用webpack的目的

当前端项目的开发规模越来越大时，需要更高的维护性和代码复用性。webpack结合前端框架的使用，就可以将CSS、JS、HTML文件的代码，按照文件类型进行分离和打包。

webpack的优势：

① 模块化开发（import，require）

② 预处理（Less，Sass，ES6，TypeScript……）

③ 主流框架脚手架支持（Vue，React，Angular）

④ 庞大的社区（资源丰富，降低学习成本）

打包JS文件的简易流程

创建项目目录，npm init初始化，源码放在src里
创建.babelrc文件，设置代码书写规则，将src代码均按规则进行转码到dist文件夹下
创建main.js文件，将模块进行集中导入，作为整个项目的入口（在webpack.config.js中设置为入口）
创建webpack.config.js文件，设置整个项目的入口，设置项目打包的出口dist/bundle.js
创建index.html文件，<script>标签内部引入打包后的项目bundle.js
以后再修改项目代码，注意先监听webpack-w

完整流程

项目目录

创建项目目录，进行初始化
```
npm init -y
```

src目录

在项目根目录下，创建src目录，用来存放源代码。（以userAPI.js和userComponent.js为例）

// userAPI.js文件
export defalut{
    createNum(){
        return 5; 
    },									//一定用逗号隔开
    sumNum(a){
        return a+a;		
    }
}

// userPrint.js文件
import {createNum,sumNum} from './userAPI.js'

exports.printMethod = function(str){
    document.write(str);
}

.babelrc文件

**（1）**在项目根目录下，配置.babelrc，用来设置转码规则和插件

{
	"presets":["es2015"],		// 设置转码规则，以es2015为例
	"plugins":[]
}

**（2）**在项目目录中，安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

**（3）**将src目录转码

mkdir dist				// 创建dist目录
babel src -d dist		// 转码命令

**（4）注意：**可在package.json更改转码命令为自定义的npm run build

{
	"script":{
		“build": "babel src -d dist"	
		// 自定义build标签以后就可以直接跑npm run build，作用与babel src -d dist一致
	}
}

main.js

创建main.js文件，将模块集中进行引入

// 导入userAPI.js文件，在该模块下封装为list对象使用
const list = require("./userAPI");
// 导入userPrint.js文件，在该模块下封装为print对象使用
const print = require("./userPrint");

print.printMethod("Hello World" + list.sumNum(createNum()));

webpack.config.js

配置webpack.config.js文件

const path = require("path");		// Node.js 内置模块
module.exports = {
    // 设置入口：同级目录的src文件夹内的main.js为入口
    entry:"./src/main.js",
    // 设置输出路径：同级目录的dist文件夹下的bundle.js
    output:{
        // __dirname:当前文件所在路径
    	path:path.resolve(__dirname,'./dist'),
        // 打包后的输出文件名
        filename:"bundle.js"		
	}
}

// 读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

执行webpack打包命令，生成bundle.js

webpack --mode=development

**注意：**可在package.json更改转码命令为自定义的npm run dev

{
	"script":{
		“dev": "webpack --mode=development"	
		// 自定义dev标签以后就可以直接跑npm run dev
        // 作用与webpack --mode=development一致
	}
}

index.html中嵌入bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

查看浏览器
后续如果项目需要修改，修改之前执行webpack-w进行监听。webpack可以自动同步更新打包。

详细版本

以viscode界面为例

1. 安装Nodejs

注意：目前webpack的简单打包仅需要nodejs提供的环境，以及npm的几条简单操作语法而已，要求不高

在这里插入图片描述

2. 新建项目目录，把项目分类好

dist：一般用来放置webpack打包后的代码

注意：最终需要上传服务器的代码就是dist文件目录，而非整个项目文件。
src：一般用来放置源代码。内部可以按照css、图片、js再新建单独的文件夹。

3. 准备nodejs环境，并自动生成package.json

# 在项目根目录下通过命令行
$ npm init -y

之后自动生成package.json的项目配置文件
在这里插入图片描述

3. 准备好nodejs环境后，本地安装webpack

$ npm install --save-dev webpack
## 简写：npm i -D webpack
$ npm install --save-dev webpack-cli
## 简写：npm i -D webpack-cli

在这里插入图片描述

接下来开始打包了！

提前配置一个index.js文件，作为被打包的对象

$s r c / s c r i p t s / i n d e x . j s$
alert('Hello Webpack!');

4. 项目根目录下手动配置webpack.config.js文件

作用：webpack.config.js是用来指示webpack如何运行

在这里插入图片描述

$w e b p a c k . c o n f i g . j s$

// 手动配置如下
module.exports = {
    entry: './src/scripts/index.js', 
    output: {
        path: __dirname + '/dist', 
        filename: 'scripts/index.js'
    }
};

entry：'./src/scripts/index.js'：填写被打包的js文件路径，作为webpack开始打包的入口。
output:{path: __dirname + '/dist'}：webpack打包后，输出代码到指定文件夹。“__dirname”代表当前项目目录的绝对路径，此时指定dist为目标输出文件夹。
output:{filename: 'scripts/index.js'}：打包输出的js文件相对于dist的路径

多个js文件需要被打包，必须使用模块化开发方式，需要通过一个集合js的文件，将其他各个的js文件模块，进行集中引入。
// 假设目前有 test1.js test2.js test3.js，都在test4.js得到引用，test4.js内容如下：
const test1 = require("./test1.js");
const test2 = require("./test2.js");
const test3 = require("./test3.js");
...

// 那么打包时,设置test4.js文件为webpack寻找全部js文件的入口
// entry: './src/scripts/test4.js', 

$ npx webpack --mode development

在这里插入图片描述

打包前：dist为空文件夹
打包后：根据webpack.config.js设置，src/scripts/index.js被webpack后，生成dist/scripts/index.js

## 如果在package.json文件中配置了webpack的script标签
"scripts": {
 "start": "webpack"   
}
## 则可以直接输入简写代替npm webpack
$ npm start

测试打包效果

方法：在dist文件夹下新建html文件，并引入打包后的index.js文件，看是否能在浏览器端正常运行即可。
在这里插入图片描述

在这里插入图片描述

其他须知

（1）JS文件的书写规范不同，中间可能需要通过babel转码。如果转码的话，就在打包前先转好，再打包。

（2）babel如何使用，详情见其他文章

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

华为云开发者联盟

CCE云原生混部场景下的测试案例

华为云开发者联盟

详解数仓的3A安全能力

华为云开发者联盟

所有评论(0)

查看更多评论

努力转码的尼扣

@Elohopea

已为社区贡献1条内容