目的：使用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比较复杂。不需要去关注

使用webpack完成简单的案例