1.创建项目目录并初始化

 

　　创建项目，并打开项目所在目录的终端，在命令框输入命令：

 

　　2.创建首页及js文件

 

　　创建一个src文件，在src里创建index.html页面，初始化页面结构：在页面中摆放一个ul，ul里面放置几个li，并在文件夹中创建index.js文件

 

　　安装jQuery

 

　　打开项目目录终端，输入命令：

 

　　导入jQuery

 

　　打开index.js文件，编写代码导入jQuery并实现功能：

 

　　3.然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack

 

　　在 webpack.config.js 文件中编写代码进行webpack配置，如下：

 

　　4.修改项目中的package.json文件添加运行脚本dev，如下：

 

　　5.安装依赖：

 

　　可能还需要重新安装jquery

 

　　6.运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件

 

　　打开项目目录终端，输入命令：

 

　　等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。

 

　　7.设置webpack的打包入口/出口

 

　　在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件 默认会将dist/main.js 作为默认的打包输出js文件 如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：

 

　　8.然后在命令框输入：

 

　　将引入的js文件路径更改为：

 

　　9.设置webpack的自动打包

 

　　安装自动打包功能的包：webpack-dev-server

 

　　2.修改package.json中的dev指令如下：

 

　　3.将引入的js文件路径更改为：

 

　　4.运行，进行打包