2_webpack基础简介；3_webpack基础配置；4_webpack基础配置复习

已于 2023-05-23 13:36:17 修改
阅读量34 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端 javascript
于 2021-04-03 16:19:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45849112/article/details/115416115
版权
本文介绍了webpack的基础配置，包括mode选项的使用。在`development`模式下，打包的JS文件未压缩，而在`production`模式下，文件会被压缩且添加hash，有助于缓存管理。当使用hash防止缓存冲突时，可以配合插件清理旧文件。
摘要由CSDN通过智能技术生成

2_webpack基础简介

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3_webpack基础配置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
mode：设置development打包生成的js文件没有压缩，设置production打包生成的js文件会压缩
打包时候生成的文件名后加一个hash，有清缓存的作用
在这里插入图片描述
在这里插入图片描述

生成的文件后缀加hash的话区分不清楚哪个是最新的，可以用这个插件清除以前生成的文件
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4_webpack基础配置复习

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

_MadD
关注
专栏目录
关于__webpack_public_path__的一些思考
哎咿呀
05-09 3158
前言：产品里有个困扰很久的bug，某处图片引用使用的require('xxxx')的方式，线上环境没问题，图片正常加载显示。当被第三方引用后，发现图片不能加载，引用路径上出现protocol:host:port/path/NANimg/xxxx.png的奇怪信息。 问题与webpack的publicPath配置有关系，conf文件中使用url-loader ...
Full_Webpack-45.4.2608-IT310_Full_Webpack.exe
09-05
Full_Webpack-45.4.2608-IT310_Full_Webpack.exe
__webpack_public_path__动态配置路径
热门推荐
qq_37976966的博客
05-15 1万+
问题： 前端采用的是vue + webpack,项目部署时会动态配置一个相对路径，页面的js，css,img都是通过这种方式引入，但是publicPath是写死的（并没有根据后台传入的url动态去匹配）就会导致页面引用的js，css，img报404的错误 Output Output用于配置打包输出的文件，包括输出文件的文件名、输出路径、静态资源 Eg: Module.exports = { Fil...
__WEBPACK_IMPORTED_MODULE_0_vue__.default is not a constructor
qq_50276105的博客
08-12 2918
学习webpack下配置vue模块，通过npm命令下载vue，测试vue模块是否能用，打包后结果报这样的错误： 在main.js文件引入vue模块： 在index.html里运用mustache：（最后该报错消失）
Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_2__.default is not a constructor 报错的解决
weixin_44161676的博客
10-12 5093
vue启动报错，Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__ is not a constructorindex.js中使用createRouter和createWebHistory。
Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_3__.createApp) is not a function
m0_52318340的博客
07-28 5882
代码】UncaughtTypeError(0,vue__WEBPACK_IMPORTED_MODULE_3__.createApp)isnotafunction。
_api_attactbs_js__WEBPACK_IMPORTED_MODULE_0__ is not a function
weixin_45121138的博客
02-21 2322
这是我报错的根源 vue -cli 3.3 的问题 两个解决方法 升级 vue-cli 到新版本 2.引用方式修改为
__webpack_require__(...) is not a function vue报错
muzidanwu的博客
04-08 4856
使用npm install vue-router 安装的router 报错__webpack_require__(...) is not a function，可能是router和webpack的版本不匹配，后执行npm i vue-router@3.2.0，将router的版本换到了3.2.0，重新npm run dev不报错了。
Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_3__.createVNode) is not a function
潮汐未见潮落的博客
08-09 8735
vue 项目全局引入 ant- design-vue 报错：Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_3__.createVNode) is not a function
vue_router__WEBPACK_IMPORTED_MODULE_7__.default.push is not a function 错误的解决
hjh15827475896的博客
11-28 2536
本人在开发一个第三方接入的项目的时候， 要在请求中判断用记是否登录过， 我们用户登录的跳转放在请求的拦截器中， 也就是 axios 的 interceptors.request.use 中，同时用户的判断登录的过和， 我写在vuex 中的 actions中， 执行是， 就dispatch就可以了， 总之，就是我要在 vuex 的 store/index.js, 实现面页的跳转。然后就出现了上面的错误。router() 难道上 图中引入的 router不一样， 是的， 确实是不一样的。
报错 - 使用marked报错 marked__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function
sunshime的博客
02-22 7675
  今天在vue项目中需要用到 marked 插件来解析markdown类型的内容 ，发现直接使用默认的方式 import marked from 'marked' 导入提示这个报错： marked__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function，通过多次尝试解决，发现其实解决方法很简单，只需要将使用es6解析marked即可，即 import { marked } from 'marked' 。 一、报错   使用marked插件的
LJM227-M231_UWWL_4-1_UWWL_4_1_Full_WebPack_44.5.2694.exe
08-25
LJM227-M231_UWWL_4-1_UWWL_4_1_Full_WebPack_44.5.2694.exe
Full_Webpack-1325-DJ1000_J110_Full_Webpack.exe
11-04
Full_Webpack-1325-DJ1000_J110_Full_Webpack.exe
LJM278-M281_UW_4_1_Full_WebPack_44.1.2549.exe
11-01
惠普（MFP M281fdw）打印机驱动
LJM129-M134_UWWL_4-1_UWWL_3_1_Full_WebPack_44.3.2667.exe
05-23
HP LaserJet MFP M132nw 驱动，亲测好用，安装时可以自动识别局域网内的打印机，支持无线、USB、有线网络
基于System.js的微前端实现（插件化）
qq_45799465的博客
10-15 803
微前端（Micro Frontends）是一种前端架构的模式，旨在将大型前端应用拆分为多个独立的、可组合的小型前端模块。这些模块可以由不同的团队独立开发、部署和维护，最终在用户界面中无缝集成。微前端的核心思想类似于后端的微服务架构，通过模块化的方式降低系统复杂性，提高开发效率和扩展性。
vue开发环境，生产环境实现跨域请求使用nginx
IT_Studio的博客
10-15 178
上述配置文件中，http对象中包括一个server，是用来搭建服务器的，linsten和server_name是你项目要部署的地址和端口号，location后面的/api是为了快速匹配下面的对应地址，proxy_pass是实际要请求的服务器地址，第二个location下面的root指向项目地址，这里是xiangmu文件夹下的dist文件夹，因为我们知道vue项目打包后会生成dist文件夹，文件夹中会有一个index.html文件。可以部署nginx解决此问题。然后我们再浏览器中访问我们的部署地址即可。
【Vue】--项目文件结构
最新发布
qq_63165460的博客
10-16 782
本文详细介绍了Vue项目的典型结构，包括build、config、src、static等关键目录的用途和重要文件的功能，如webpack配置、环境变量设置、入口文件和组件组织等，帮助开发者理解Vue项目的构建流程和组织方式。
【Vue】Vue扫盲（七）如何使用Vue脚手架进行模块化开发及遇到的问题(cmd中无法识别vue命令、vue init webpack 命令执行失败)
qq_39666711的博客
10-12 883
并把webpack解压进去，因为处于C盘，所以可能无权限在里面直接解压，我们可以创建一个webpack文件夹，然后再别的盘解压后，再复制到此文件夹下即可。2.但是提示下载webpack的时候，连接超时，那么这个资源可能不在国内，需要kexue上网；结果我这都是通的，但是就是不行，不知道为什么，索性换了一种方式----下载好webpack模版后，然后离线创建这个项目。紧接着在cmd初始化的窗口中，进入到vue-demo的项目里面，执行npm run dev命令启动项目。从上图可以清楚的看到，我已经安装过了。
Vue+webpack项目基础配置全面指南
3. **webpack.config.js配置**：在项目根目录下编写webpack配置文件，设置entry（入口）为`src/index.js`，指定output（输出）文件为`dist/bundle.js`，同时指定了输出文件的路径。此外，配置了module.rules来处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值