1. 新建项目
1.1. 新建一个ES6Model文件夹
1.2. 打开VSCode
1.3. 使用VSCode打开文件夹
1.4. 选择要打开的文件夹
1.5. 资源管理器中显示打开的文件夹
1.6. 在终端中运行: npm init -y命令, 初始化包管理器文件package.json
1.7. 在ES6Model下新建一个src目录, 在src目录下新建一个index.html
1.8. 在终端中运行: npm install jquery -S命令, 安装JQuery。
1.9. 在src目录下新建一个index.js, 适用JQuery实现列表隔行变色
2. 安装和配置webpack
2.1. 在终端中运行: npm install webpack webpack-cli -D命令, 安装webpack相关包
2.2. 在项目根目录中, 创建webpack.config.js的webpack配置文件。在webpack文件中, 初始化如下配置:
2.3. 在package.json文件的scripts节点下, 新增dev: webpack脚本。scripts节点下的脚本, 可以通过npm run执行。
2.4. 在终端中运行: npm run dev命令, 启动webpack进行项目打包。
2.5. 打包完成后, 在项目根目录下生成了一个dist目录, 该目录下生成了main.js
2.6. 在index.html中导入main.js
2.7. 打开index.html, 查看效果图
3. webpack打包的入口与出口
3.1. webpack的4.x版本中, 打包的入口与出口默认约定:
3.1.1. 打包的入口文件为src——>index.js
3.1.2. 打包的出口文件为dist——>main.js
3.2. 如果要修改打包的入口与出口, 可以在webpack.config.js中新增如下配置信息:
4. 配置webpack的自动打包功能
4.1. 在终端中运行: npm install webpack-dev-server -D命令, 安装支持自动打包的工具
4.2. 修改packgae.json的scripts中的dev为webpack-dev-server
4.3. 修改webpack.config.js, 配置devServer的静态目录为项目根目录
4.4. 导入的js文件, 不再有./dist目录
4.5. 重新进行打包, 可以看到终端并没有结束, 如果我们修改代码, 它会自动重新打包
4.6. 访问http://localhost:8080/
4.7. 访问http://localhost:8080/src/
5. 配置html-webpack-plugin生成预览页面
5.1. 在终端中运行: npm install html-webpack-plugin -D命令, 安装生成预览页面的插件
5.2. 修改webpack.config.js, 配置生成预览页面插件
5.3. 访问http://localhost:8080
6. 配置打包完成后自动打开页面
6.1. --open打包完成后自动打开浏览器页面
6.2. --host配置IP地址
6.3. --port配置端口
6.4. 重新打包后, 自动浏览器打开页面