乐鱼电竞



教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

webpack是什么？有什么用？怎么用？

更新时间:2021年12月02日11时06分 来源:乐鱼电竞 浏览次数:

webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。

webpack


Webpack安装教程

在安装webpack前，电脑需要先安装node.js，详细参考《node.js环境安装教程》。

在Windows+R键，输入cmd，在命令行中执行如下命令即可安装webpack：

npm install webpack -g

-g是全局安装

启动命令行
启动命令行

输入webpack安装命令
输入webpack安装命令

开始安装webapck
等待webapck安装

webpack安装完成

安装完成后，执行"webpack-v" 命令，查看webpack版本，如下所示：

安装检测

小提示：旧版本的webpack还需要安装webpack cli脚手架工具，而最新版本的webpack打包工具已经集成了脚手架工具。



webpack常用安装命令

1. 安装webpack

npm install webpack -g

2. 卸载版本:

npm uninstall webpack -g
npm uninstall -g webpack-dev-server

3. 设置代理：

npm config set registry "http://registry.npmjs.org/"

4. 清除代理设置：

npm config set proxy null
npm config set https-proxy null

5.查看代理：

npm config get proxy
npm config get https-proxy

webpack简单使用

在安装webpack之后，我们通过一个例子展示webpack的简单使用。

(1) 创建C:\vue\chapter01\demo01目录，作为项目目录。


(2) 在demo01目录中创建example.js文件，具体代码如下:

function add(a, b){
	return a + b
}
console .log(add(1,2))

上述代码用于计算两个数之和，在控制台中输出计算结果。


(3)在demo01目录下执行如下命令，进行打包操作:

webpack ./example.js -o app.js

webpack打包


执行上述命令后，就会编译example.js文件，将编译后的结果保存为app.js文件。


(4)创建example.html文件，引人编译后的app.js文件，具体代码如下:

<script src="app.js"></script>


(5)在浏览器中打开example.html，运行结果如图所示。

webpack打包案例

从图中可以看出，控制台输出的打印结果为3，说明此时已经将example.js文件打包为app.js文件。



猜你喜欢：

webpack打包体积优化方法有哪些？

Github官网git手册

GitHub官网:如何设置git

GitHub官网:如何创建回购

乐鱼电竞web前端开发高手班

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】