webpack 5.5.1 compiled with 1 error in 63 ms

① 新建项目空白目录，并运行 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为大写。

webpack 5.5.1 compiled with 1 error in 63 ms相关推荐

运行 npm run dev 命令，启动 webpack 进行项目打包出现问题opensslErrorStack: [ ‘error:03000086:digital envelope routine
webpack打包出现了以下问题: 经过经过查阅发现是因为node版本的问题,可以在终端执行以下命令解决这个问题: set NODE_OPTIONS=--openssl-legacy-provider ...
webpack打包图片资源问题
在实际应用中有以下几种图片的引用方式: HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div sty ...
webpack中利用eslint对js进行代码格式检校
1.下载多个相关插件 npm i -D eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import 2.we ...
安装webpack出错
项目场景: 安装整个没有什么报错 C:\Users\dam>webpack -v webpack: 5.70.0 webpack-cli: 4.9.2 webpack-dev-server 4. ...
webpack的development和production模式
webpack的development和production模式 webpack打包模式 development模式开发环境不会对打包生成的文件进行代码压缩和性能优化. 打包速度快,适合在开发阶段 ...
webpack5打包图片报错——Module parse failed: Octal literal in strict mode 图片不能正常显示
Octal literal in strict mode 一.webpack打包图片二.报错三.解决四.img标签中的图片打包后不能正常显示五.总结六.追加一.webpack打包图片 we ...
webpack错误之ERROR in mainModule not found: Error: Can‘t resolve ‘./src‘ in ‘C:\Users\tuchunrong\Progr
当终端出现以下错误时: WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'p ...
运行ant-design-pro报错ERROR in ./node_modules/swagger-ui-react/swagger-ui.js 2:107055-107070Module not
报错内容: ERROR in ./node_modules/swagger-ui-react/swagger-ui.js 2:107055-107070 Module not found: Erro ...
error in ./node_modules/swagger-ui-react/swagger-ui.js
后端提示:ERROR Failed to compile with 1 errors 12:29:51 PMerror in ./node_modules/swagger-ui-react/swagg ...
Error: Couldn‘t find preset “stage-2“ relative to directory
ERROR in ./src/main.js Module build failed (from ./node_modules/_babel-loader@7.1.5@babel-loader/lib ...

webpack 5.5.1 compiled with 1 error in 63 ms

webpack 5.5.1 compiled with 1 error in 63 ms相关推荐

最新文章

热门文章