webpack的基本使用

2021 年 11 月 12 日

932 次浏览

912字数

<h2>webpack 的基本使用</h2><h2>1、什么是 webpack</h2><p>概念：webpack 是前端项目工程化的具体解决方案。</p><p>主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性<br>能优化等强大的功能。</p><p>好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。</p><p>注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的</p><h2>2、创建列表隔行变色项目</h2><p><strong>npm执行需要按照node.js</strong></p><ol><li>新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/1108651960.png" alt="init.png" title="init.png"style=""></li><li>新建 src 源代码目录</li><li>新建 src -&gt; index.html 首页和 src -&gt; index.js 脚本文件</li><li>初始化首页基本的结构<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/3297389702.png" alt="html.png" title="html.png"style=""></li><li>运行 npm install jquery –S 命令，安装 jQuery<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/684637757.png" alt="jquery.png" title="jquery.png"style=""></li><li>通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/3589436160.png" alt="js.png" title="js.png"style=""></li></ol><h2>3、在项目中安装 webpack</h2><p>在终端运行如下的命令，安装 webpack 相关的两个包：<br>npm install webpack webpack-cli -D</p><h2>4、 在项目中配置 webpack</h2><ol><li>在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/276232390.png" alt="mode.png" title="mode.png"style=""></li></ol><p>2.在 package.json 的 scripts 节点下，新增 dev 脚本如下：<br> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/3626077743.png" alt="dev.png" title="dev.png"style=""></p><h2>4.1 mode 的可选值</h2><p>mode 节点的可选值有两个，分别是：</p><ol><li>development</li></ol><p>开发环境<br>不会对打包生成的文件进行代码压缩和性能优化<br>打包速度快，适合在开发阶段使用</p><ol><li>production</li></ol><p>生产环境<br>会对打包生成的文件进行代码压缩和性能优化<br>打包速度很慢，仅适合在项目发布阶段使用</p><h2>4.2 webpack 中的默认约定</h2><p>在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：</p><ol><li>默认的打包入口文件为 src -&gt; index.js</li><li>默认的输出文件路径为 dist -&gt; main.js</li></ol><p>注意：可以在 webpack.config.js 中修改打包的默认约定</p>