关键词：
1. 什么是 webpack
概念：webpack 是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。
2. 创建列表隔行变色项目
① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery –S 命令，安装 jQuery
⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
3. 在项目中安装 webpack
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
4. 在项目中配置 webpack
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
4.1 mode 的可选值
mode 节点的可选值有两个，分别是：
① development
⚫ 开发环境
⚫ 不会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度快，适合在开发阶段使用
② production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢，仅适合在项目发布阶段使用
4.2 webpack.config.js 文件的作用
webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件， 从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。
4.3 webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
4.4 自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
webpack学习
1.前端工程化最近几年，前端（自动化）构建工具大受欢迎。对于初学者，首先应该了解为什么要用这些工具，或者说，使用这些工具的目的（作用）是什么，再或者，这些工具能让我们干一些什么事情？笔者以为，既然是“... 查看详情
webpack前端构建工具学习总结之自动化生成项目中的html页面
接续上文：webpack前端构建工具学习总结（三）之webpack.config.js配置文件1.安装html-webpack-plugin插件，输入命令：npminstallhtml-webpack-plugin--save-dev2.在webpack.config.js文件中，引入html-webpack-plugin插件3.输入命令：npmrunwebpack，编译打包可以... 查看详情
webpack简介(代码片段)
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力。Webpack凭借强大的功能与良好的使用体验... 查看详情
前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中，我们对Grunt以及Grunt插件的使用已经有了初步的认识，并探讨了Grunt的主要组件以及它的运转机制，这篇文章是Grunt使用... 查看详情
webpack4面试题
...现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。而如果摒弃了这些开发框架，那么开发的效率将大幅下... 查看详情
深入浅出的webpack构建工具---webpack基本配置(代码片段)
深入浅出的webpack构建工具---webpack基本配置(一)阅读目录一：webpack入门构建：1.安装webpack到全局2.安装webpack到本项目。3.如何使用webpack？4.使用loader5.使用插件（Plugin）6.使用DevServer二：webpack基本配置1.context2.entry3.Output4.模式（mode... 查看详情
webpack基本使用（详解）(代码片段)
在开始之前，我们先来看以下Webpack官网首页的图片，并思考一下官网图片传达给我们的含义? 一.Webpack基本介绍1.1概念的引入思考：在网页中，我们经常会引入哪些常见的静态资源JS.js.jsx.coffee.ts（TypeScript类C#语言）CSS.css... 查看详情
vuewebpack的基本使用(代码片段)
...学从头开始学习 ajax学习文章目录webpack的学习目标前端工程化 小白眼中的前端开发vs实际的前端开发 什么是前端工程化 前端工程化的解决方案webpack的基本使用 什么是webpack 列表隔行变色项目 在项目中安装并配置webp 查看详情
前端工程化系列[03]-grunt构建工具的运转机制(代码片段)
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中，已经对Grunt做了简单的介绍，此外，我们还知道了该如何来安装Grunt环境，以及使用一些常见的插件了，这篇文章主要介绍Grunt的核心组件和运转机制。Grunt是一套前端自... 查看详情
前端工具之webpack
1webpack简介：2webpack的使用步骤 1全局安装：webpack和webpack-cli 2创建一个文件夹命名webpack01，项目初始化：（一路enter键即可） 3本地项目安装webpack 4 查看详情
webpack系列--浅析webpack的原理(代码片段)
...现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前... 查看详情
前端工程化-webpack工作流程(代码片段)
前言：目前，webpack作为前端最流行的项目构建工具，然而webpack内部的执行过程却是黑盒的，作为模块加载和打包神器，只需配置几个文件，加载各种loader就可以享受无痛流程化开发，对于webpack这样一... 查看详情
webpack(零工程构建一个前端项目)(代码片段)
工作流程记录：1.初始化项目：npminit-y2.安装webpack,vue,vue-loadernpminstallwebpackvuevue-loader3.按装之后根据警告提示，安装css-loader,vue-template-conpiler依赖包。npminstallcss-loadervue-template-compiler项目初始化基本完成。一直遇到提示installwebpa 查看详情
深入浅出的webpack构建工具---babel之配置文件.babelrc(代码片段)
...读目录一：理解babel之配置文件.babelrc基本配置项二：在webpack中配置babel回到顶部一：理解babel之配置文件.babelrc基本配置项1.什么是babel?它是干什么用的？ ES6是2015年发布的下一代javascript语言标准，它引入了新的语法和API... 查看详情
时下最流行前端构建工具webpack入门总结
...1a;wenjuanrao，腾讯PCG前端开发工程师最近梳理了下以前webpack的相关开发经验，整理和总结了一份入门笔记，欢迎大家围观和批评指正。随着web应用越来越复杂和庞大，前端技术迅猛发展，各路大神各显神通... 查看详情
vue基础--webpack介绍以及基础配置(代码片段)
...本文中所提及的版本学习，了解原理！一、前端工程化1.现代化前端编程 模块化（js的模块化、CSS的模块化、资源的模块化） 组件化（复用现有的UI结构、样式、行为） 规... 查看详情
webpack4.0各个击破——css篇(代码片段)
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题+解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处... 查看详情
一webpack的基本使用(代码片段)
一、什么是webpack概念：webpack是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。好处：让程序员把... 查看详情