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 来执行
![](https://img2022.cnblogs.com/blog/1190148/202208/1190148-20220812184551078-931897183.png)
4、在终端运行npm run dev 来启动webpack进行项目打包
目录中自动增加了dist文件夹
5、引入打包后的js文件,就没有报错了
结果: