一,webpack是什么
webpack 是前端项目工程化的具体解决方案,企业中的 Vue 项目和 React 项目,都是基于工程化的方式进行开发的。
好处:解决代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
意思就是说:
1.能够兼容一些高级的语法,然后webpack能自动转为低级语法,这样程序运行也不会报错,让程序员把工作的重心放到具体功能的实现上,下面我会用例子来验证
2.把前端项目升级,更系统,成为工程化项目。工程化大家都懂。。。就是标准而且大
二,webpack 的基本使用
新建一个隔行变色项目来验证webpack的好处
① 新建项目空白目录webpack1,打开终端(就是cmd运行)也可以Shift+鼠标右键打开Powershell窗口,然后 npm init –y 命令,初始化包管理配置文件 package.json
② 在根目录下新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
这时候我们应该想到webpack,将高级语法转化为低级语法运行
在项目中安装 webpack
npm install [email protected] [email protected] -D
①在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:
② 在 package.json 的 scripts 节点下,新增 dev 脚本如下
③ 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建
这 时候大家可以看到多了一个dist文件夹,这是webpack把index.js处理后形成的
dist里面的main.js兼容性就强,所以src引入文件修改成dist文件位置
就实现了隔行变色效果,这就是webpack的强大,把ES6高级语法转换为低级运行