webpack 5.5.1 compiled with 1 error in 63 ms

最新推荐文章于 2023-07-15 09:00:44 发布

梳殃

最新推荐文章于 2023-07-15 09:00:44 发布

阅读量5.4k

点赞数 4

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_66970557/article/details/126907284

版权

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json

② 新建 src 源代码目录

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- index.js存在兼容性问题 -->
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.js"></script>
</head>

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>

</html>

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

// 1.使用es6模块化的语法导入jquery,浏览器出现兼容性问题
import $ from 'jquery'


// 2.实现隔行变色的效果
$(function() {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', 'cyan')
})

安装webpack

终端运行

npm install webpack@5.5.1 webpack-cli@4.2.0 -D

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode: 'development'
}

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

打包会出现这种情况webpack 5.5.1 compiled with 1 error in 63 ms提示出现一个小错误，我出现问题的原因是jQuery安装出现错误，建议重新运行一下安装jQuery命令npm install jquery –S，注意S为大写。

梳殃

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack 5.5.1 compiled with 1 error in 63 ms

webpack 5.5.1 compiled with 1 error in 63 ms
复制链接

扫一扫