版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/82078261
目的：使用webpack完成简单的案例
前提已经安装了webpack https://blog.csdn.net/Tomwildboar/article/details/81940522
我所使用的编辑器是 vscode
第一步：创建好工程结构 （我这个前面的图标是因为下载了一个插件，可以网上去搜索一下，我忘记了）
第二步：初始化 npm init -y
第三步：安装jquery
第四步：书写index.html & main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./main.js"></script>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
</body>
</html>//导入jq
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','red');
$('li:even').css('backgroundColor','pink');
})第五步：打包
我们刚刚导入jquery的方式，不被浏览器识别。所以我们需要打包一些main.js
5-1.在打包之前需要安装一下 webpack-cli
5-2.打包 webpack ./src/main.js ./dist/bundle.js
webpack ./src/main.js ./dist/bundle.js
webpack:是一个命令
./src/main.js:是要打包的文件
./dist/bundle.js:打包好后放的位置 及其名称注意：上面这种打包方式是 webpack 3版本的。 在webpack版本4就会报错。 我使用的是webpack4 打包如下
第五步：测试
由于我们包main.js打包成了bundle.js 所以我们需要改变一下index.html的引用
测试结果如下：
注：打包生成的 bundle.js比较复杂。不需要去关注