webpack 是一个流行的前端项目构建工具(打包工具),可以解决 web 开发中所面临的困境
webpack 提供了友好的模块化支持,以及代码压缩混淆,处理 JS 兼容问题,性能优化等强大的功能,从而让程序员把工作重心放到功能实现上,提高开发效率和项目的可维护性
1. package.json 文件初始化
①: 新建项目空白目录,并运行 npm init -y 命令, 初始化包管理配置文件 package.json
②: 新建 src 源代码目录
③: 新建 src -> index.html 首页
④: 初始化首页基本的结构
⑤: 运行 npm install jquery -S 命令安装 JQuery
⑥: 通过模块化的形式,实现列表隔行变色效果
2:Webpack-cli 初始化
【 5版本的 webpack 不能和 4 版本 cli 兼容,会报错 】
①:运行 npm install webpack webpack-cli -D 命令,安装 webpack 相关的包
②:在项目目录中,创建名为 webpack.config.js 的webpack 配置文件
③:在 webpack 的配置文件中,初始化如下基本配置
module.exports = {
mode: “development” // mode 用来指定构建模式
}
④:package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:
“scripts”: {
“dev”: “webpack” // script 节点下的脚本,可以通过 npm run 执行
}
⑤:在终端运行 npm run dev 命令,启动 webpack 进行项目打包
【 打包完成的时候,打包文件 自动生成 dist 里面自动生成 main.js ,入口文件: src 里面的 index.js】
3: 修改打包入口文件和输出文件
打包的入口文件为 src -> index.js
打包的输出文件为 dist -> main.js
如果要修改打包的入口与出口,可以在 webpack.config.js 中新增如下的配置信息