1、创建一个新的文件夹 运行 npm init -y 命令 初始化包管理配置文件 package.json
2、新建src源代码目录
3、新建src =》 index.html首页 和 index.js 脚本文件 （注意这里必须用src创建文件夹 里面用index.html和index.js 命名 不然webpack不识别 如果想更改名字 需要在webpack.config.js配置文件里更改他所识别的文件名）
4、运行npm install jquery -S 命令，安装jQ
5、通过es6 模块化方式导入jQ,实现需求效果
6、运行 npm install webpack@5.42.1 webpack-cli@4.7.2 -D 安装两个包 最好安装指定版本稳定
7、创建webpack.config.js 的webpack配置文件，初始化基本配置
module.exports = {
// 代表weboack运行的模式，可选值有两个 development 和 production
mode: 'production',
};8、在package.json 的 scripts 节点下 新增dev脚本
"scripts": {
"dev": "webpack"
},运行 npm run dev
9、webpack打包之后 会创建一个新的文件夹dist.这里在html里引入js时，要引入的是dist里的main.js 之下是完整代码
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>
<script src="/main.js"></script>
</body>
</html>index.js
import $ from 'jquery'
$(() => {
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
})简单的一个webpack打包完毕
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
