小白入门（webpack基本使用）

CodeGuruInk

已于 2024-05-06 20:18:39 修改

阅读量748

点赞数 15

分类专栏：前端学习文章标签： webpack 前端 node.js

于 2023-12-28 07:27:28 首次发布

本文链接：https://blog.csdn.net/aabbbccc6788123/article/details/135252807

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注意！要使用Webpack，你需要先安装Node.js

第一步：什么是webpack

Webpack是一个现代的静态模块打包工具，它可以将多个模块打包成一个或多个文件，以便在浏览器中加载。

简单来讲：是想要在浏览器在运行的时候能够识别JS,Css等语法

为什么？

因为有些低版本的js,有些模块化语法(Vue,React等)是不识别，所以这类型的代码只能经过编译才能成功，所以打包工具就诞生啦

还有哪些打包工具（本期Webpack）

Grunt Gulp Parcel Rollup Vite Webpack...

第二步：五个核心概念

入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

输出(output)：在哪里输出文件，以及如何命名这些文件。

Loader：处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript和json）。

插件(plugins)：执行范围更广的任务，从打包到优化都可以实现。

模式(mode)：有生产模式production和开发模式developmen。

第三步：准备Webpack使用文件（手把手教学！）

1.创建文件夹注意！文件名不能webpack

2.把文件在vscode打开（什么编辑器都可以），以下项目里的文件只是示例

3.在count.js文件里面写一个减法模块化函数（export default）

export default function count(x,y) {
    return x-y;
}

4.在main.js调用刚刚写的count.js

//导入js文件中的count.js文件（不用加后缀）
import count  from "./js/count";
console.log(count(0,1));

5.在index.html里引入main.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hahah</h1>
</body>
<script src="../src/main.js"></script>
</html>

到这里我们的文件都创建好啦！我们来运行一下。

我们运行的时候发现会产生报错，这是因为export default模块化在浏览器里并不识别，所以我们要继续往下写

第四步：下载依赖

在vscode中，打开终端，会自动来到项目根目录

1.初始化package.json

PS D:\webpack-demo> npm init -y

成功后，可以看到根目录下出现了package.json文件

2.下载依赖

PS D:\webpack-demo> npm i webpack webpack-cli -D

之后项目中会出现名node_modules文件夹（包含了项目所需的所有依赖模块）和package-lock.json文件（用于确保在不同的开发环境中安装的依赖模块的版本一致性）

第五步：启用Webpack

这个命令会使用Webpack对指定的main.js文件为入口进行打包

PS D:\webpack-demo> npx webpack ./src/main.js --mode=development

随后根目录出现dist文件(常是用来存放项目打包后的文件的目录)夹说明成功了

第六步：重新打开页面（超级重点）

刚刚写的index.html页面中引入的main.js文件路径要修改成打包后dist下面的main.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hahah</h1>
</body>
<script src="../dist/main.js"></script>
</html>

之后我们重新运行页面就是成功啦！