首页 > 其他分享> 文章详细

Vue基础系统文章07---webpack安装和配置与打包

2022-07-31 16:04:25 阅读：129 来源： 互联网

标签：npm index Vue 07 文件 jquery js --- webpack

1、当前web开发困境

a.文件依赖关系错综复杂

b.静态资源请求效率低

c.模块化支持不友好

d.浏览器对高级js兼容性低

例如：模块代码实现隔行换色

1）在新建空白文件夹中运行：npm init -y 会初始化一个package.json文件

2）新建src文件夹，文件夹中建index.html

3) 运行：npm i jquery 安装jquery

4) 新建index.js文件，以模块化的方式引用jquery，并设置隔行换色，文件是这样的：

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>11111111111</li>
        <li>22222222222</li>
        <li>33333333333</li>
        <li>44444444444</li>
        <li>55555555555</li>

    </ul>
</body>
</html>

index.js文件

import $ from jQuery

$(function(){
    $(".li:odd").css("backgroundColor","pink");
    $(".li:even").css("backgroundColor","lightblue");
})

浏览器中运行，报错

要解决此问题，需要安装webpack

2、安装webpack,运行：npm i webpack-cli -D

3、项目根目录下新建webpack.config.js文件，内容如下:

module.exports={
    mode:'development'
}

4、在package.json 配置文件中的scripts节点下，新增dev脚本如下：

5、在终端运行：npm run dev 命令，启动webpack进行项目打包

再次打开index.html就可看到隔生换色的效果

标签：npm,index,Vue,07,文件,jquery,js,---,webpack
来源： https://www.cnblogs.com/zhengwei-cq/p/16510472.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue基础系统文章07---webpack安装和配置与打包