webpack的使用小案例

1.新建一个空白文件夹 在文件夹打开命令行运行npm init -y初始化包管理文件package.json

这一步会生成package.json文件

2.新建一个src文件夹储存源代码 并在src文件夹内新建html首页 index.hrml 和 首页js文件index.js 并初始化首页基本结构

3.运行npm instsll jquery -S命令安装jQuery   参数-S表示指定把jQuery安装在package.json的节点dependencies里 该节点里记录的是 在项目开发阶段和发布阶段所需要的包

4.通过ES6模块化的方式导入jQuery，实现列表隔行变色效果 代码如下：

在这一步骤过后我们打开网页时会有语法错误，并不能实现效果 我们接下来还需要在项目中安装并配置webpack

5.在项目中安装webpack：在终端运行命令 npm install webpack@5.42.1 webpack-cli@4.7.2 -D 安装webpack相关的两个包 -D表示把包安装在package.json的节点devDependencies下，该节点里记录的包是在项目开发阶段所需要的包

6.1 在项目中配置webpack：在项目中创建名为 webpack.config.json 的webpack配置文件，并初始化如下的基本配置：

//使用 Node.js中的导出语法，向外导出一个 webpack 的配置对象

module.exports = {

    //代表 webpack 运行的模式 可选值有 development 和 production

    mode:'development'

}

6.2 在package.json 的scripts 节点中新增dev（变量名，随便取）脚本如下：

 7. 在终端中运行npm run dev 命令，启动webpack进行项目的打包构建 在这个步骤中会生成一个dist文件夹 里面包含一个main.js文件，该文件打包了index.js、package.json等文件