webpack的基本使用

梓逸
2021-07-01 / 0 评论 / 0 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月17日,已超过14天没有更新,若内容或图片失效,请留言反馈。

webpack 的基本使用

1、什么是 webpack

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

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性
能优化等强大的功能。

好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。

注意:目前 Vue,React 等前端项目,基本上都是基于 webpack 进行工程化开发的

2、创建列表隔行变色项目

npm执行需要按照node.js

  1. 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json
    init.png
  2. 新建 src 源代码目录
  3. 新建 src -> index.html 首页和 src -> index.js 脚本文件
  4. 初始化首页基本的结构
    html.png
  5. 运行 npm install jquery –S 命令,安装 jQuery
    jquery.png
  6. 通过 ES6 模块化的方式导入 jQuery,实现列表隔行变色效果
    js.png

3、在项目中安装 webpack

在终端运行如下的命令,安装 webpack 相关的两个包:
npm install webpack webpack-cli -D

4、 在项目中配置 webpack

  1. 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:
    mode.png

2.在 package.json 的 scripts 节点下,新增 dev 脚本如下:
dev.png

4.1 mode 的可选值

mode 节点的可选值有两个,分别是:

  1. development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快,适合在开发阶段使用

  1. production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢,仅适合在项目发布阶段使用

4.2 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:

  1. 默认的打包入口文件为 src -> index.js
  2. 默认的输出文件路径为 dist -> main.js

注意:可以在 webpack.config.js 中修改打包的默认约定

0

评论

博主关闭了所有页面的评论