前端模块化打包工具——webpack起步

最新推荐文章于 2023-10-18 17:06:24 发布

ssssy10000

最新推荐文章于 2023-10-18 17:06:24 发布

阅读量373

点赞数 1

本文链接：https://blog.csdn.net/weixin_47664795/article/details/108826377

版权

1. Webpack简介
官方解释：
webpack is a static module bundler for modern JavaScript applications.
Webpack是一个现代的JavaScript应用的静态模块打包工具
在这里插入图片描述

模块化：webpack的核心是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。（不仅仅是JavaScript，图片、json文件等在webpack中都可以被当作模块使用）
打包：将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle），并且在打包的过程中，可以对资源进行处理。

2. 和grunt/gulp对比

grunt/gulp的核心是Task，被成为前端自动化任务管理工具
配置一系列的task，并且定义task要处理的事物（ES6、ts转化，图片压缩，scss转成css）
让grunt/gulp依次执行task，让整个流程自动化
当整个项目没有用到模块化管理，或者模块间的依赖性不强，我们可以把文件进行压缩、整理后，使用grunt/gulp。

3. webpack安装
安装webpack首先需要安装Node.js，它自带了软件包管理工具npm(node packages manager)

查看自己的node版本
查看webpack版本
全局安装webpack（vue-cli2依赖webpack3.6.0）
局部安装webpack(.json文件定义了scripts时，使用局部webpack)

4. webpack起步
4.1. 创建文件和文件夹

dist文件夹：存放之后打包的文件
src文件夹：存放我们写的源文件

main.js：项目的入口文件。
注意：main.js是webpack打包的入口，因此只有main.js文件中依赖的文件才会被打包。

//1.使用commonjs的模块化规范
const {add,mul}=require('./mathUtils.js')
console.log(add(20,30));
console.log(mul(20,30));
//使用ES6的模块化的规范
import {name,age,height} from "./info";
console.log(name);
console.log(age);
console.log(height);

mathUtils.js：定义了一些数学工具函数，可以在其它地方引用和使用。

function add(num1,num2) {
			    return num1+num2
			}
			function mul(num1,num2) {
			    return num1*num2
			}
			module.exports = {
			    add,
			    mul
			}

info.js：一个简单的js文件，将被main.js引用

export const name ='why';
export const age = 18;
export const height =180;

index.html：浏览器打开展示的首页html
package.json：通过npm init生成的，npm包管理的文件。
在terminal中cd到已知文件夹，输入npm init

创建完成：

4.2. 由于当前代码是由前端模块化构成的，需要运用webpack三个文件进行打包

在terminal中找到当前文件所在的位置，输入webpack src/main.js dist/bundle.js

以main.js为入口，把其中引用到的文件打包到刚才创建的dist文件的bundle.js文件中。可以发现在dist文件夹中出现了bundle.js文件，并且其中有我们刚刚写的mathUtils.js和info.js两个文件中的内容。

4.3. 此时，只要在index.html中直接引用刚才打包的文件就可以了。
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="dist/bundle.js"></script>
		</body>
		</html>