基本概念
wepack:webpack是前端开发中的打包工具,负责将你开发的主要代码转换成js或则其他,单个js或其他文件(通常情况下)。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack与node:而webpack是由js编写的js模块,js模块是nodejs的概念,意思就是要学习和使用webpack先要了解node。
node:node是一个软件,内置了v8引擎可以像浏览器一样执行js代码,同时又增加了一些对操作系统api接口和额外api。这些东西使得node可以单独运行js代码,并且支持js做到一些在浏览器中做不到的事。
结论:下载node,在node中使用webpack这个js模块完成webpack打包功能。
补充npm:即使下载node,webpack也是需要额外再下载的,node作为一个软件负责运行,同时存在一个软件npm负责下载js模块,npm和node可以说是设计好的一对工具,只有其中一个都无法发挥js在开发中的真正威力。
具体操作
所以我们先下载node和npm,目前node版本内置了npm,也就是下载node安装后npm也就一起下载安装好。
其次,node和npm也是基于dos操作界面进行指令操作,也就是不再是图形化的界面操作。
dos就是Ctrl+R后输入cmd确认弹出的终端界面,通过指令打开软件,通过指令操作软件,这里node和npm都是没有界面(node.exe并不是)。
好了空话不说了,开始操作(提前是node和npm安装好,教程请另寻)
自己找个空文件夹,将dos终端的执行地址修改为当前地址
npm初始化:(可选)
如果我们下一步安装webpack是全局,这一步可以暂时省略。
npm init -y
生成npm的js模块配置文件,帮助确定用npm在当前项目里下载了那些js模块,用于开发还是线上等等。
下载webpack和检测是否安装成功
这里我们下载webpack的同时下载webpack-cli脚手架。--save-dev指令可以改成-g全局安装。然后我们使用webpack -v查看版本,以此检测是否安装成功。
npm install webpack webpack-cli --save-dev
webpack -v
--save-dev指令告诉npm这个模块是项目的开发依赖,记录在npm配置文件package.json中。删除node_modules后按照配置文件初始化,是会自动下载该模块的,打包时不会被打包。
第二条指令通过执行查看webpack模块的版本指令来验证安装是否成功。webpack-cli作为开发环境需要安装。