什么是Webpack？如何使用？

2024-04-18 05:59:22

目录

为什么需要打包工具？

有哪些打包工具？

如何使用

1.资源目录

2.创建需要打包的文件

3.下载依赖包

4.启用Webpack

5.打包输出结果

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

有哪些打包工具？

Grunt
Gulp
Parcel
Webpack
Rollup
Vite
...

目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具。Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器端运行了。

我们将 Webpack输出的文件叫做bundle。

Webpack 本身功能是有限的:

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

如何使用

1.资源目录

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

2.创建需要打包的文件

· count.js

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

· multi.js

export default function multi(...args) {return args.reduce((p, c) => p * c, 0);
}

· main.js

import count from "./js/count";
import multi from "./js/multi";console.log(count(2, 1));
console.log(multi(1, 2, 3));

3.下载依赖包

初始化 package.json以及下载webpack脚手架到开发模式 -D

npm init -ynpm 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 = development/production：指定模式（环境）

5.打包输出结果

默认 webpack 会将文件打包输出到 dist 目录下;webpack不做其他配置时，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。后续章节会介绍webpack如何处理其他资源。

什么是Webpack？如何使用？相关推荐

第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...

最新文章

热门文章