webpack的基本使用

最新推荐文章于 2024-08-26 08:36:12 发布

向阳菌

最新推荐文章于 2024-08-26 08:36:12 发布

阅读量683

点赞数

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/m0_68997646/article/details/127606070

版权

1.webpack是一个静态资源打包工具、

该技术以一个或者多个文件为入口文件，然后经过打包之后变为一个或者多个文件传输出去

输出的文件就是打包好的文件，可以直接在浏览器当中显示运行

2.Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

3.开始使用

A.资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    |---public
    |     |---index.html
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

count.js

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

sum.js

export default function sum(...argc){
    return argc.reduce((p,c)=>{a+c},0)
}

main.js

import count from "./js/count";
import sum from "./js/sum";
console.log(count(10,1));
console.log(sum(1,23,59,56));

index.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>
<script src="../src/main.js"></script>
<body>
    <h1>hello! webpack</h1>
</body>
</html>

然后在运行的时候，我们就会发现控制台会报错

因为在这里系统不能直接引入文件，因为浏览器不能直接识别这些代码，所以这个时候webpack的作用就显得非常重要了

4.下载依赖

打开终端，来到项目根目录。运行以下指令：

初始化package.json
```
npm init -y
```

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

4. 启用 Webpack

开发模式

npx webpack ./src/main.js --mode=development

生产模式
```
npx webpack ./src/main.js --mode=production
```
npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）

5. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了