创建列表隔行变色效果
1.基本操作：
1.新建项目空白目录（不能叫webpack!!!），运行
npm init -y命令，初始化管理配置文件package.json。
在 vscode 中按快捷键 ctrl+` 可打开终端
2.新建src目录，此目录下新建 index.html，初始首页
index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 执行 ul>li{这是第$个li}*9 命令，快速创建li
<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>
<script src='./index.js'></script>
</html>
3.运行
npm i jquery -S,安装jquery
4.通过模块化的形式，实现隔行变色效果
index.js文件内容:
// jquery大小写不影响
import $ from 'jQuery'
// odd选择器匹配索引值为奇数的元素，从0开始计数
// even选择器匹配所有索引值为偶数的元素，从0开始计数
$(function(){
$('li:odd').css('backgroundColor','pink')
$('li:even').css('backgroundColor','lightblue')
})
运行后发现并不能正确实现效果并且报错，原因在于 index.js 文件的首行代码是es6的模块化语法，浏览器对这种语法不能很好的识别。
解决方法：
把代码转换成没有兼容性的代码，在index.html文件中导入转换之后的<script src='xxx'></script>代码。
2.在项目中安装和配置webpack
1.运行
npm install webpack webpack-cli -D命令，安装 webpack 相关的包
2.在项目根目录中创建名为 webpack.config.js 的 webpack 配置文件
3.在 webpack 的配置文件中，初始化如下基本配置：
module.exports = {
mode: 'development' // mode 用来制定构建模式
}
mode - development/production
开发阶段值尽量都设为 development
4.在 package.json 配置文件中的script 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack" // script节点下的脚本，可以通过 npm run 执行
}
5.在终端中运行
npm run dev命令，启动 webpack 进行项目打包。打包完成可见根目录新建 dist\main.js，记得修改 index.html 中的js路径。
3.配置打包的入口与出口
webpack 的 4.x 版本中默认约定：
- 打包的入口文件为 src\index.js
- 打包的输出文件为 dist\main.js
如果要修改打包的入口和出口，可在 webpack.config.js 中新增如下配置信息：
const path = require('path') //导入node.js中专门操作路径的模块
module.exports = {
entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'bundle.js' //输出文件的名称
}
}
4.配置自动打包的功能
打包完成后如果需要修改css效果或是其他代码，修改后直接刷新浏览器是不成功的，需要重新打包再执行，非常麻烦，所以在这里配置 webpack 的自动打包功能。
接上，先 ctrl+c停掉自动打包。
1.运行
npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
2.修改package.json->scripts 中的 dev 命令如下：
"dev": "webpack-dev-server"
webpack-dev-server会启动一个实时打包的http服务器
3.将src\index.html中的script脚本引用路径改为
bundle.js：
<script src='/bundle.js'></script>
3.运行
npm run dev命令，重新进行打包（打包后不会退出终端，而是等待着代码的改变
4.在浏览器中访问 http://localhost:8080/ 查看自动打包效果
5.配置生成预览页面
进入http://localhost:8080/后看到的是根目录，需要点击手动进入index.html，所以配置使点击直接进入index.html。
1.运行
npm install html-webpack-plugin -D命令，安装生成预览页面的插件
2.修改 webpack.config.js 文件的头部区域，添加如下配置信息：
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin ({ //创建插件的实例对象
template: './src/index.html', //指定要用到的模板文件
filename: 'index.html' //指定生成的文件名称，该文件存在于内存中，在目录中不显示
})
3.修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：
module.exports = {
plugins:[ htmlPlugin ] // plugin 数组是 webpack 打包期间会用到的一些插件列表
}
4.重新执行
npm run dev命令，进入http://localhost:8080/查看效果
6.配置自动打包的相关参数
运行npm run dev后需要手动复制浏览器地址才能查看页面，修改使运行后自动弹出页面。
//package.json中的配置
// --open 打包完成后自动打开浏览页面
// --host 配置 ip 地址
// --port 配置端口
"script": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}
7.webpack中的加载器
在实际开发过程中， webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他模块默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错。
loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：
-
less-loader可以打包处理 .less 相关的文件 -
sass-loader可以打包处理 .scss 相关的文件 -
url-loader可以打包处理 css 中与 url 路径相关的文件
打包处理 css 文件
- 运行
npm i style-loader css-loader -D命令，安装处理 css 文件的loader
2.在 webpack .config.js 的 module->rules 数组中，添加 loader 规则如下：
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
}
- 其中， test 表示匹配的文件类型， use 表示对应要调用的 loader
- use 数组中指定的 loader 顺序是固定的
省略了在src/css中写css文件内容及 index.js 中import css文件的步骤，下面也都省略了奥~
打包处理less文件
- 运行
npm i less-loader less -D
2.在 webpack.config.js 的 module->rules 数组中，添加 loader 规则如下：
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }
]
}
打包处理scss文件
- 运行
npm i sass-loader node-sass -D
2.在 webpack.config.js 的 module->rules 数组中，添加 loader 规则如下：
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }
]
}
8.配置postCSS自动添加css的兼容前缀
1.运行
npm i postcss-loader autoprefixer -D
2.在项目根目录中创建 postcss 的配置文件 postcss.config.js ，并初始化如下配置：
const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {
plugins: [autoprefixer] //挂载插件
}
3.在 webpack.config.js 的module->rules 数组中，修改（不是添加） css 的 loader 规则如下：
module: {
rules:[
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }
]
}
9.打包样式表中的图片和字体文件
1.运行
npm i url-loader file-loader -D
- webpack.config.js 的 module->rules 中添加loader规则：
{ test: /\.jpg|png|gif|bmp|ttf|svg|woff|woff2$/, use: 'url-loader?limit=2147'}
limit是图片大小
10.打包处理js文件中的高级语法
如果直接在index.js文件中加上：
class Person{
static info='aaa'
}
直接运行会报错，因为默认打包不了这种高级语法，需要配置。
1.安装babel转换器相关的包
npm i babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件相关的包npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中创建babel配置文件 babel.config.js 并初始化基本配置如下：
module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}
4.在 webpack.config.js 的module->rules 数组中，添加 loader 规则：
// exclude为排除项，表示 babel-loader不需要处理 node_modules 中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
这样再运行就可以在控制台输出'aaa'了。
