您现在的位置是：首页 >其他 >webpack: 5 报错，错误网站首页其他

webpack: 5 报错，错误

小强有个dream 2024-06-14 18:01:02
简介webpack: 5 报错，错误

webpack-报错：Uncaught ReferenceError: $ is not defined (webpack)

  1. webpack打包jquery的插件（EasyLazyLoad）时，报错

  2. 方法一： //多个js文件用到jquery，用这种方法
    在jquery.min.js的做最后写上下面的代码
    export default $=$
    并 在入口函数按需引入

     ```
 import $ from './jquery.min.js'
 ```

  3. 方法二：
    先 在index.js中导入文件

import './js/jquery.min.js'

然后在EasyLazyLoad.js插件的最上面一行引入

```
 import $ from './jquery.min.js'
```
  1. 采用webpack内置组件 //配置文件中。先引入webpack,再在plugins选项内最上面使用
const Webpack = require('webpack')

new Webpack.ProvidePlugin({
      $: 'jquery'  //全局暴露的第三方库      .不写内置模块的话，报$ is not defined
    }),

报错：打包之旅–踩坑

  1. 下面是用yarn初始化包引起的警告 //记得用npm iniy -y
    在这里插入图片描述
  2. 引入zepto报错
    在这里插入图片描述
解决的步骤书写你的代码
下载npm i -D script-loader exports-loader
webpack文件中配置module.rules项{ test: require.resolve('zepto'), use: ['exports-loader?window.Zepto','script-loader'] }
js入口文件中来引入import $ from 'zepto'

说明： stackoverflow上说 react是componentJS也会出现这种错误，可以用这种方式
import React, { Component } from ‘react’;

  1. webpack 打包注意点
打包配置项说明
output配置对象path需要的是绝对路径， path=require(‘path’);

两种任选一种

  output:{filename:'main.js',path:path.join(__dirname,'dist')},    //拼接的绝对路径

  output:{filename:'main.js',path:path.resolve(__dirname,'./dist')},    //解析的绝对路径
打包配置项说明
plugins配置项中，html-webpack-plugin插件配置html文件及网站图标(ico需要先安装url-loader)先下载html-webpack-plugin,const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({ // 打包输出HTML
      filename: 'index.html',
      template: './src/index.html',
      favicon: './favicon.ico', // 添加小图标
      inject: true
    }),
    ]
打包配置项说明
module.rules配置项中，打包这些字体图标及png,jpg等图标文件npm i url-loader
//根据图标大小来设置?limit-后的值
// 他可以将html以及css中的图片打包成base64,但需要你设置大小限制，她是不可能把一个4M图片转成base64的
rules:[
 { test: /.(png|jpg|gif|eot|svg|ttf|woff)$/, use: 'url-loader?limit-400000' },
]
打包配置项说明
module.rules配置项中，处理html文件中img标签引入的图片先下载 npm i html-loader
// src要写相对路径
rules:[
{test: /.html$/,use: { loader: 'html-loader' }}  
]

报错：打包报错

打包字体后，页面出现出现下面错误，图标无法正常使用
Uncaught Error: Automatic publicPath is not supported in this browser

在webpack.config.js中
output: {
publicPath: ‘./’
// publicPath: ‘/’
}

打包字体后，页面上出现下面错误提示且字体图标无法正常显示
GET http://127.0.0.1:5500/font/iconfont.072.woff net::ERR_ABORTED 404 (Not Found)

对比了下发现打包的文件根本不在上面的路径上，而是在dist的目录下
output: {
publicPath: ‘./dist/’
}

webpack打包出错，错误如下
{ Error: EPERM: operation not permitted, lstat 'C:Users72126190Desktopwebpack-sampledistfonticonfont.072.woff'

打包时打包文件被占用了。建议关闭访问index.html的窗口重新打包

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐