这是我参与「第四届青训营」笔记创作活动的第20天

Webpack基础配置

什么是webpack？

webpack是前端项目工程化的解决方案，它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JS兼容性、性能优化等强大功能，简化了程序员的操作，使其可以把工作重心放到具体功能的实现上，大大提高了开发效率。

初始化项目

新建一个空白目录，用VScode打开，在终端输入npm init -y指令，完成项目的初始化，此时项目中新增了一个名为package.json的文件。
新建src源代码目录，新建index.html首页和index.js脚本文件并初始化网页结构。
运行 npm install jQuery -S 指令，安装jQuery，并通过ES6模块化的方式导入，实现列表隔行变色的效果。代码如下：

HTML:

<body>
  <ul>
    <li>这是第 1 个 li</li>
    <li>这是第 2 个 li</li>
    <li>这是第 3 个 li</li>
    <li>这是第 4 个 li</li>
    <li>这是第 5 个 li</li>
    <li>这是第 6 个 li</li>
    <li>这是第 7 个 li</li>
    <li>这是第 8 个 li</li>
    <li>这是第 9 个 li</li>
  </ul>
</body>

JavaScript:

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'
// 2. 定义 jQuery 的入口函数
$(function () {
  // 3. 实现奇偶行变色
  // 奇数行为红色
  $('li:odd').css('background-color', 'red')
  $('li:even').css('background-color', 'pink')
  // 0 是偶数
  // 1 是奇数
})

此时若直接打开，网页不会有各行变色的效果，因为目前浏览器对于ES6模块化支持还不是很完善，为了解决这个问题，我们就要用到webpack，接着我们步入正题，进入webpack安装配置环节！

Webpack安装与配置

打开VScode的终端，输入以下指令：npm install webpack webpack-cli -D,安装webpack和webpack-cli。
在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下基本配置：

module.exports={
    mode:'development'
}

mode有两个属性值，development和production，分别代表开发版本与产品版本。 3.在package.json文件中，新增dev和build脚本如下：

"scripts": {
    "dev": "webpack",
  },

4.完成上述配置后，打开终端，输入npm run dev ，几秒种后，根目录会生成一个dist文件夹，里边就是打包好的文件，打开其中的index文件夹，发现隔行变色效果生效了。

基本配置完成，后续深入讲解其他相关内容

Webpack配置-----基础配置|青训营笔记

Webpack基础配置

什么是webpack？

初始化项目

Webpack安装与配置