webpack基础

webpack的使用

1、新建项目空白目录，并运行npm init -y 命令，初始化包管理配置文件package.json

2、新建src源代码目录

3、新建src ->index.html 首页和src ->index.js脚本文件
4、初始化首页基本的结构
5、运行npm install jquery -S 命令，安装jquery
6、通过es6模块化的方式导入jquery，实现列表隔行变色效果，

webpack的安装与配置

在项目中安装webpack
在终端运行如下命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
在项目中撇脂webpack
1、在项目根目录中，创建名为webpack.config.js 的webpack配置文件，并初始化

2、在package.json的script节点下，新增dev脚本

3、在终端中运行npm run dev 命令，启动webpack 进行项目的打包构建
4、自定义打包的入口与出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

webpack-dev-server插件的配置与安装

每当修改源代码，webpack会自动进行项目的打包和创建
安装地址：
npm install webpack-dev-server@3.11.2 -D
配置：
1、修改package.json - scripts 中的dev命令如下
2、再次运行npm run dev命令，重新进行项目的打包
3、在浏览器中访问http：//localhost:8080地址，查看自动打包效果

html-webpack-plugin

安装地址：
npm install html-webpack-plugin@5.3.2 -D
配置过程：
1、导入html插件，得到一个构造函数
const HtmlPlugin = require(‘html-webpack-plugin’)
2、创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:’./src/index.html’指定源文件的存放路径
filename:’./index.html’ 指定生成文件的存放路径
})
module.exports ={
mode:‘devlopment’,
plugins:[htmlPlugin],通过plugins节点，使htmlPlugin插件生效
}

devServer节点

在webpack。config。js配置文件中，可以通过devserver节点对webpack-dev-server插件进行更多的配置

devServer:{
	open:true,//初次完成打包后，自动打开浏览器
	host:'127.0.0.1',//主机地址
	port:80,