使用webpack完成简单的案例

布满荆棘的人生 2022-05-15 06:41 243阅读 0赞

# 目的：使用webpack完成简单的案例 #

前提已经安装了webpack   [https://blog.csdn.net/Tomwildboar/article/details/81940522][https_blog.csdn.net_Tomwildboar_article_details_81940522]

我所使用的编辑器是  vscode

### 第一步：创建好工程结构 （我这个前面的图标是因为下载了一个插件，可以网上去搜索一下，我忘记了） ###

![70][]

###  第二步：初始化  npm init -y ###

![70 1][]

###  第三步：安装jquery ###

![70 2][]

###  第四步：书写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

![70 3][]

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 打包如下

![70 4][]

![70 5][]

### 第五步：测试 ###

由于我们包main.js打包成了bundle.js  所以我们需要改变一下index.html的引用

![70 6][]

测试结果如下：

![70 7][]

注：打包生成的 bundle.js比较复杂。不需要去关注

[https_blog.csdn.net_Tomwildboar_article_details_81940522]: https://blog.csdn.net/Tomwildboar/article/details/81940522
[70]: /images/20220515/c6a03d7c4f0e4b678264206801402418.png
[70 1]: /images/20220515/7b5e80d45ece4499817b565f05efbc89.png
[70 2]: /images/20220515/ccf4c5c5941a44fab6a01b179afb9c83.png
[70 3]: /images/20220515/830d0851983c40048c070bf2ec7b6905.png
[70 4]: /images/20220515/5bce212bc32a46a797ca26ba206a3f44.png
[70 5]: /images/20220515/a73c65db7d3e411482f13df242e4ea54.png
[70 6]: /images/20220515/9c8d5708aee24f37a227e8f790b8a92d.png
[70 7]: /images/20220515/6a7e64cb14cf42db981438f4e84769f8.png