效果展示：
步骤：
1.cmd终端中新建项目文件夹，初始化package.json
npm init -y
2.新建src源代码目录
3.在src中新建index.html和index.js文件
4. 初始化index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
</ul>
</body>
</html>
5.cmd安装jQuery
// -S代表将安装的包的名字以及对应的版本号记录到dependencies中
// dependencies：开发、部署时都要用到的包
// 完整命令为--save
npm i jquery -S
6. 在index.js使用ES6导入语法，导入jQuery
// es6 导入jQuery
import $ from 'jquery'
// 定义jQuery的入口函数
$(function () {
$('li').css('list-style','none')
// 实现奇偶行变色
$('li:odd').css('background-color','skyblue')
$('li:even').css('background-color','pink')
})
7.在index.html引入js文件
<script src="./index.js"></script>
8.cmd安装webpack
// -D代表将安装的包的名字以及对应的版本号记录到devDependencies中
// devDependencies：只有开发时会用到的包
// 完整命令为--save-dev
npm install [email protected] [email protected] -D
9. 根目录下创建webpack.config.js文件
10. webpack.config.js文件中配置
// 使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack运行的模式，可选值有两个development 和 production
mode: 'development'
}
11.package.js中新增dev脚本
"scripts": {
"dev": "webpack"
},
12.cmd运行
npm run dev
development模式：打包速度快，未压缩，生成文件体积大
production模式：打包速度慢，压缩，生成体积小
13.index.html中重新引入js文件
<script src="../dist/main.js"></script>
14.alt+b 用浏览器打开
15.指定要处理哪个文件，指定生成的文件要存放到哪里
const path = require('path')
// 使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack运行的模式，可选值有两个 development 和 production
mode: 'development',
// 指定要处理哪个文件
entry: path.join(__dirname,'./src/index.js'),
// 指定生成的文件要存放到哪里
output: {
// 存放到目录
path: path.join(__dirname,'dist'),
filename: 'bundle.js'
}
}
本文转载自: https://blog.csdn.net/weixin_42541725/article/details/123161809
版权归原作者 hacalili 所有， 如有侵权，请联系我们删除。
版权归原作者 hacalili 所有， 如有侵权，请联系我们删除。