前端应用_webpack_基本的使用方式

最新推荐文章于 2022-02-13 07:21:19 发布

上海_彭彭

最新推荐文章于 2022-02-13 07:21:19 发布

阅读量156

点赞数 1

分类专栏： webpack 前端构建工具文章标签： webpack 基本使用方式

本文链接：https://blog.csdn.net/qq_34979346/article/details/99730494

版权

webpack 前端构建工具专栏收录该内容

15 篇文章 0 订阅

订阅专栏

webpack 安装的两种方式

使用 npm i webpack -g 是全局安装，安装一次以后就不需要安装了
在项目根目录中运行 ‘npm i webpack --save-dev’ 安装项目依赖中，只是针对这个项目，其他项目不可以用

创建项目目录结构

在这里插入图片描述

安装 jquery

在主目录执行 npm init -y 进行初始化
执行 npm i jquery -S 进行安装

index.html 编写以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级隔行变色</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .form{
            width: 500px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #404060;
            width: 500px;
            text-align: center;
        }
        th,td{
            border: 1px solid #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
    </style>
    <script src="./dist/bundle.js"></script>
  
</head>
<body>
<div class="form">
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody class="target">
        <tr>
            <td>001</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>003</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>004</td>
            <td>赵武</td>
            <td>100</td>
        </tr>

        
        </tbody>
    </table>
</div>
</body>
</html>

main.js

import $ from  'jquery'
  $(function () {
            var trodd = $(".form tr:odd");
            var treven = $(".form tr:even");
            trodd.css("background","#a3a3a3");
            treven.css("background","#ccc");

            //计数器，记录鼠标经过之前的颜色
            var color = "";
            $(".form tr").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","#fff");
            });
            $(".form tr").mouseleave(function () {
                $(this).css("background",color);
            });
        });

用浏览器打开会报错：

**SyntaxError ： Unexpectd token import **

引入webpack 并介绍使用

解析如下：
ES6 语法，浏览器解析不了，所以在导入 jquery 报错 >>import $ from 'jquery’

解决方法为：

使用webpack 进行处理，把交给的资源进行处理，输出的 webpack 就能识别。

使用语法

webpack .\src\main.js .\dist\bundle.js

使用webpack 命令，把main.js 进行处理，然后把输出的文件放到自定义目录里， bundle 是自己定义的，你也可以更改但是一般常规都用bundle .

总结

webpack 能处理js 文件的相互依赖关系.
解决 JS的兼容问题，把高级浏览器不识别的语法转为低级浏览器正常识别的语法
通过webpack 构建工具把main.js 做以下处理，生成一个bundle 文件，这个文件浏览器可以识别
刚才运行的命令格式： webpack 要打包的文件路径打包好的输出文件的路径

上海_彭彭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_webpack_基本的使用方式

webpack 安装的两种方式使用 npm i webpack -g 是全局安装，安装一次以后就不需要安装了在项目根目录中运行 ‘npm i webpack --save-dev’ 安装项目依赖中，只是针对这个项目，其他项目不可以用创建项目目录结构安装 jquery在主目录执行 npm init -y 进行初始化执行 npm i jquery ...
复制链接

扫一扫