Webpack初始化配置和几个加载器

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 中新增如下的配置信息