创建项目，初始化项目 — 这里使用隔行变色的主页来做演示。
运行npm init -y初始化项目，使用npm管理项目中的依赖包
init后会生出 package.json
npm init -y
创建需要的文件夹和文件
webpack安装的两种方式
-
运行
npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 -
在项目根目录中运行 npm i webpack -D 安装到项目依赖中
npm i webpack -D
使用npm i jquery -S安装jquery类库
创建 index.html
<!-- ul>li*10{这是第$个li} -->
<body>
<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>
<li>第10个li标签</li>
</ul>
</body>
创建main.js并书写各行变色的代码逻辑：
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor', 'skyblue')
$('li:even').css('backgroundColor', 'red')
})
创建webpack.config.js
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
mode: 'development',
// 配置开发服务器，代码变化，自动刷新
devServer: {
// 这个很重要，配置不对，会出现Cannot GET /
static: '../webpack-s',
// 浏览器网址上显示的端口号
port: 3000,
// 是否自动打开浏览器
open: true
}
}
安装自动刷新功能
运行npm i webpack-dev-server -D安装到开发依赖
npm i webpack-dev-server -D
运行 npm run dev 启动项目