更新时间:2021年12月02日11时06分 来源:传智教育 浏览次数:

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

Webpack安装教程

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

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

npm install webpack -g

-g是全局安装

启动命令行
输入webpack安装命令
等待webapck安装

安装完成后，执行"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 执行上述命令后，就会编译example.js文件，将编译后的结果保存为app.js文件。

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

<script src="app.js"></script> (5)在浏览器中打开example.html，运行结果如图所示。

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

猜你喜欢：

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

Github官网git手册

GitHub官网:如何设置git

GitHub官网:如何创建回购

传智教育web前端开发高手班

上一篇： 使用HTTP模块构建Web服务器【案例演示】 下一篇： 2021新版前端开发入门教程：html5+css3+项目实战