webpack的概念
webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性
webpack的基本使用
创建项目目录并初始化，初始化包管理配置文件package.json
npm init -y新建src源代码目录
新建src->index.html首页
初始化首页基本结构
运行
npm install jquery -S安装JQuery通过模块化的形式，实现列表隔行变色
index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="./index.js"></script> </head> <body> <input type="text" placeholder="ceshi" /> <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li>这是第6个li</li> <li>这是第7个li</li> <li>这是第8个li</li> <li>这是第9个li</li> </ul> </body> </html>
index.js文件
import $ from "jquery"
$(function(){
$("li:odd").css("backgroundColor","pink");
$("li:even").css("backgroundColor","lightblue");
})这种写法有问题，因为index.js文件中使用了import，这属于ES6的语法了，浏览器不兼容，所以需要使用webPack来打包
安装和配置WebPack
运行
npm install webpack webpack-cli -D安装webpack相关的包在根目录中，创建名为
webpack.config.js的webpack配置文件在webpack.config.js配置文件中，初始化如下基本配置
module.exports={
mode:'development'//mode用来指定构建模式，这是开发模式，生产模式为production
}在package.json配置文件中的scripts节点下，新增dev脚本
"scripts":{
"dev"："webpack" //scripts节点下的脚本，可以通过npm run执行
}在终端运行
npm run dev，启动webpack进行项目打包
在运行完以上步骤后，会自动生成一个dist目录，且在dist目录中生成main.js文件，在index.html中更改<script src="../dist/main.js"></script>
配置打包的入口与出口
webpack的4.0版本默认约定：
打包的入口文件为src->index.js
打包的输出文件为src->main.js
如果要自定义打包的入口和出口，则需要更改webpack.config.js中的配置信息
const path = require("path") //导入node.js中专门操作路径的模块
module.exports = {
entry:path.join(__dirname,"./src/index.js"),//打包入口文件的路径 __dirname是该文件的当前目录
output:{
path:path.join(__dirname,"./dist"),//输出文件的存放路径
filename:"boundle.js" //输出文件的名称
}
}配置webpack自动打包
为什么要自动打包？如果修改某些js文件进行保存不会热重载，需要手动执行npm run dev
安装自动打包工具
npm install webpack-dev-server -D修改package.json ->scripts中的dev命令：
"scripts":{
"dev":"webpack-dev-server" //scripts节点下的脚本，可以通过npm run执行
}将src->index.html中script节点下的脚本路径修改为
路径/boundle.js，因为自动打包会将生成的js文件托管到根目录下（在内存中），至于是哪个路径，默认http://localhost:8080/运行
npm run dev重新打包
注意：webpack-dev-server会启动一个实时打包的http服务器，
webpack-dev-server 打包生成的输出文件，默认放到项目根目录，而且是虚拟的在项目中看不到
生成预览界面
设置访问路径打开默认的界面
运行
npm install html-webpack-plugin -D命令，安装生成预览页面的插件修改webpack.config.js文件头部区域，添加如下内容
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
template:"./src/index.html",//设定作为默认页面的文件
filename:"index.html" //指定生成文件的名称，存储于内存中，在目录中不显示
});修改webpack.config.js文件中向外暴露的插件配置对象
module.exports ={
plugins:[htmlPlugin] //plugin数组是webpack打包期会用到的插件
}在终端运行
npm run dev，启动webpack进行项目打包
配置自动打包相关的参数
上面使用webpack自动打包完成后，需要手动在浏览器中输入网址，自动打开浏览器的设置如下：
//package.json中的配置
//--open 打包完成后自动打开浏览器
//--host 配置IP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
