webpack通俗易懂----入门篇

webpack是前端项目工程化的具体解决方案。

 

主要解决了以下问题：

代码压缩混淆、处理浏览器端JS代码兼容、性能优化等等

 

下面用一个例子，用webpack打包的方式解决浏览器对ES6语法的兼容问题~

 

第一步：初始化包管理配置文件

npm init -y

第二步：创建源代码目录 src  （固定的）

第三步：创建首页页面文件和脚本文件

页面基本结构为：

第四步：下载jquery包-----写代码实现页面中奇数和偶数元素背景颜色不一样

index.js中代码：

不兼容：

第五步：使用webpack解决兼容问题

1、先下载webpack：npm i webpack@5.5.1 webpack-cli@4.2.0 -D

2、根目录创建 webpack.config.js文件，并设置为开发模式：

                     

3、在package.json 的script节点下，增加dev脚本：

script下的脚本可通过npm run 来执行

4、在终端运行npm run dev 来启动webpack进行项目打包

目录中自动增加了dist文件夹

5、引入打包后的js文件，就没有报错了

结果：