webpack的理解和使用

一，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 脚本文件

④ 初始化首页基本的结构

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 在index.js文件，通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

你会发现，我们写的代码太高级了，程序运行不出来！！！

这时候我们应该想到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高级语法转换为低级运行