webpack5以下的项目，前端引入node的path模块需要额外配置

最新推荐文章于 2024-05-31 22:41:13 发布
最新推荐文章于 2024-05-31 22:41:13 发布
阅读量136 收藏
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42372534/article/details/138797762
版权

webpack5以下的项目，前端import * as path from 'path'时需要额外配置，这里以vue.config.js为例
刚开始引入时报错
在这里插入图片描述
在这里插入图片描述
其实就是在打包前端项目的时候，将path模块替换成 path-browserify 模块，所以还需要安装 path-browserfify 模块

npm i path-browserfify
新时代的弩力
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用webpack4 + vue2 从零开始创建的 TodoList 前端项目
10-11
若有想要学 Webpack 的，真的很值得下载这个资源： 其一、包括初始化安装 webpack 工具； 其二、安装 Vue 并挂载实例，浏览器能打开 index.html 文件; 其三、webpack 基本配置，成功打包 .js 文件； 其四、Webpack 使用 vue-loader 打包 vue 文件，浏览器成功打开 .js 和 .vue 文件; 其五、其它 loader的用法(如：打包图片、打包 CSS 文件、打包 stylus 文件); 其六、使用 html-webpack-plugin、clean-webpack-plugin 插件、 autoprefixer 插件； 其七、使用 devServer 配置、使用模块热替换、使用 SourceMap 配置； 其八、将环境分成开发环境、生成环境、公共部分; 其九、使用 babel 将 ES6 编译成 ES5 的语法(即：兼容 ES6 的语法)； 其十、TodoList 项目组件拆分与设计项目的目录结构； 其十一、实现 MainHeader 组件、核心 MainTodo 组件、MainFooter 组件，明确需求与业务逻辑及项目小结
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
node+模块化+Webpack.pdf
07-11
小破站的Vue+Webpack的详细学习笔记，包含Node JS模块化 Webpack
详解webpack打包nodejs项目(前端代码)
01-01
随着前端体积越来越大，功能越来越丰富，这时候就需要将前端工程化，而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热替换 适用情况 首先说明，此情况不具备普遍性。若你的情况与笔者类似那么希望这篇文章能够帮到你。 我的项目情况是这样的：用node.js做后台，ejs做模板引擎（即整个页面是一个ejs文件）由node.js将数据渲染完成后，再将完整页面返回给用户。 那么这样做会遇到的问题： 1. 本项目没有html页面，ejs的作用也不是引入公共的组件，直接就是一个完整
前端工程化之 Webpack 5 项目构建优化
qq_23935353的博客
12-22 1710
一个项目的构建的性能优化，主要是从构建时间和构建体积这两个方面入手。 ○ 缩减与指定编译范围、提前与缓存构建、并行构建 ○ 分割代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源
Node.js与Webpack
Peng_jj的博客
08-08 283
Node.js 为何能执行JS?什么是 Node.js?Node.js 安装。
详细总结Webpack5的配置和使用
zag666的博客
07-23 2009
webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
Node-Webpack静态模块打包工具
2301_76866366的博客
04-24 697
Webpack概念 使用 Webpack 修改 Webpack 打包入口和出口 自动生成 html 文件 打包 css 模块 打包 less 模块 打包图片 babel 编译器 Webpack 开发服务器 打包模式 开发环境调错 - source map 解析别名 alias
webpack中使用vue实战-2(项目准备工作)
weixin_42759726的博客
08-29 327
一.安装vue包 npm install -S vue 二.安装和配置loader 安装并配置一些基本的loader,项目中会用到 1.安装处理css的css-loader npm install -D style-loader css-loader webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/i, use: ["style-load
webpack5 基础配置
^_^
02-16 1273
在开发中，我们会使用 vue、react、less、scss等语法进行开发项目，但是浏览器只能识别 js、css，或者说在js中使用了es6中的import 导入 这时候也需要打包工具去转换成浏览器可以识别的语句。一、使用webpack 1.初始化package.json npm init -y 注意生成的package.json 中的name不要叫插件名称 否则下载不了。 2.下载依赖 npm i webpack webpack-cli -D
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 209
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 369
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 749
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 102
练习JS的实用案例
前端Vue小兔鲜儿电商项目实战Day05
最新发布
ltt159264的博客
05-31 567
ElementPlus表单组件内置了初始的校验配置，应付简单的校验只需要通过配置即可，如果想要定制一些特殊的校验需求，可以使用自定义校验规则，格式如下：校验逻辑：如果勾选了协议框，通过校验，如果没有勾选，不通过校验。
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 724
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
低代码开发与前端架构
dsgdauigfs的博客
05-31 702
这篇文章将深入探讨低代码开发如何改变前端开发的方式，以及如何有效地将低代码工具与现代前端架构原则结合起来，以提高开发效率和应用质量。
py黑帽子学习笔记_web攻击
peter6768的博客
05-30 829
py3好像把urllib2继承到了标准库urllib，直接用urllib就行，urllib2在urllib里都有对应的接口。
Webrtc支持HEVC之Mediasoup SDP协商编码流程(三)
qq_15821883的博客
05-31 298
Mediasoup SDP协商编码流程
怎么在webpack配置文件中正确引入了需要使用的js文件
04-04
1. 首先需要确定需要引入的js文件的路径，可以使用相对路径或者绝对路径。 2. 在webpack配置文件中使用require或者import语句引入需要使用的js文件。例如： ```javascript const myModule = require('./myModule'); import myModule from './myModule'; ``` 3. 在webpack的entry属性中添加需要引入的js文件，例如： ```javascript module.exports = { entry: { main: './src/index.js', myModule: './src/myModule.js' }, //... }; ``` 4. 在webpack的module属性中配置相应的loader，以支持引入的js文件的语法和特性。 ```javascript module.exports = { //... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }; ``` 以上是基本的配置方式，具体需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值