webpack基础（一）——安装及基本使用

概念

webpack是前端模块化打包工具。

一、安装及使用

webpack为了能够正常运行，必须依赖node环境，node环境为了可以正常地执行很多代码，其中必须包含各种依赖的包，而npm工具是为了管理其中的各种包。

1.1安装node（本文不赘述）

查询电脑node版本

1.2安装webpack

全局安装webpack（本文安装版本为3.6.0）

安装指令：npm install webpack@3.6.0 -g      

"@"后数字代表版本，也可不指定版本，会安装最新版

"-g"代表全局安装（终端里使用时，都是用的全局安装的webpack），对应的"--save-dev"代表局部安装

安装完成后需要配置环境变量：

电脑环境变量

二、基本使用

当js文件中使用了模块化的方式进行开发时，如果在index.html调用，浏览器是不会识别其中的模块化代码的，此外，实际项目中存在大量js文件，依次调用过于繁琐也不便管理。这时，我们就需要使用webpack来对文件进行打包

打包指令：webpack 需要打包的文件路径 打包后的文件路径

ps：4.0以上版本为   webpack 需要打包的文件路径 -o 打包后的文件路径

例：webpack ./src/main.js ./dist/bundle.js

打包路径 main.js mathUtil.js info.js

命令中虽然只打包了main.js，但webpack会自动将他需要的文件自动打包到目标文件中

文件打包完成后，直接在html中引用这一个文件即可