今天在用Webpack开发的时候，突然发现文件变动后热部署功能不工作了，感觉好像是webpack检测不到文件的修改了。折腾了半天，开始一直以为是自己的代码有问题了，结果一次无意识的重启了一下机器后发现又可以热部署了，感觉像是见鬼了。于是继续观察。一天后，不幸再次降临，问题又出现了。调研了一下，原来 Webpack 的热部署功能是使用 inotify 来监视文件变化，其中 fs.inotify.ma
转载
2023-02-07 00:25:46
75阅读
Vue项目热部署-环境配置先打开node.js的官网 https://nodejs.org/en/点击DOWNLOADSLTS是长期维护的一个版本，Current是最新版。我们一般选LTS选择自己对应的系统进行安装即可。傻瓜式下一步安装。cmd进入运行界面，通过两个命令查看是否安装成功。npm是node下载时自带的一个工具。注册码云https://gitee.com/ 用于放我们的代码，或者工作中
转载
2024-01-22 19:54:35
43阅读
当某个模块发生变化的时候，websocket收到推送第一次{ type: 'hash', data: 'd8f78ce9
原创
2022-11-23 00:17:48
107阅读
正文 代码 const path=require('path'); module.exports={ devtool:'', entry:{ entry:'./src/entry.js', entry1:'./src/entry1.js', }, output:{ path:path.resolve
转载
2020-06-15 14:15:00
368阅读
2评论
Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A
转载
2021-07-07 16:44:00
108阅读
Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue";
转载
2021-07-07 14:36:00
61阅读
webpack.config.js 只需要注意加大加粗的地方。 package.json 命令行执行 npm run dev 测试
转载
2017-02-16 19:32:00
171阅读
2评论
VUE项目中个人感觉还是使用vue官方提供的vue-cli脚手架来构建项目的人比较多，相关的文档也总结了很多，而我的项目是采用vue-ssr即服务器端渲染，项目架构来源与尤大在git-hub上的开源项目——vue-hackernews-2.0，想了解的自行在git-hub上搜索本篇主要来记录一下项目部署的流程：1.项目在本地开发完成后，需要打包编译，执行以下命令npm run build正常执行后
转载
2023-12-14 10:45:12
80阅读
什么是 HMR 通过 webpack-dev-server 自动打包并没有真正的放到指定的目录中, 因为读写磁盘是非常耗时和消耗性能的, 所以为了提升性能 webpack-dev-server 将转换好的内容直接放到了内存中, 通过 webpack-dev-server 可以实现实时监听打包内容的变
原创
2021-11-14 18:17:00
322阅读
这里就想记录一下关于解决路由懒加载热更新慢的问题。我们知道使用路由懒加载可以优化我们系统的加载速度，但是在使用懒加载的时候在我们开发环境下会导致Webpack热更新慢的问题，致使我们运行项目会很漫长。（当然如果是通过Vue3的Vite的话，它是不用webpack的所以这里也不列举进来）那么我们就可以进行设置，在我们开发环境下就不用懒加载，在我们生产环境下就用懒加载就可以了。我们可以在路由设置的文件
转载
2022-02-15 14:13:45
1700阅读
Hot Module Replacement，热模块更新，很多时候会简写成HMR。 "scripts": { "start": "webpack-dev-server", }, 在加热更新之前，我们运行npm run start，会发现之前我们打包有个dist目录，为什么运行这个命令的时候，dist
转载
2019-04-24 10:02:00
172阅读
2评论
前言 如果我们想在webpack中使用vue，就需要在webpack中配置vue 配置vue 首先，我们需要在项目中安装vue，安装命令如下： npm install vue --save 安装完成后，我们在主入口main.js文件中导入vue并创建一个实例 import Vue from 'vue
原创
2021-07-13 11:05:34
277阅读
Webpack是一个现代JS应用的静态模块打包的工具 学习Webpack需要我们安装NodeJS 配置CNPM & CRM 使用切换镜像的方式配置：【不建议】 npm config set registry http://registry.npm.taobao.org 安装镜像管理工具： npm i
转载
2020-07-24 21:52:00
128阅读
2评论
1.安装webpack项目环境bashnpminstallwebpacksavedev2.安装css的loaderbashnpminstallsavedevcssloader3.安装style的loaderbashnpminstallsavedevstyleloader
原创
2021-12-29 17:58:22
225阅读
Webpack作用：Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分ack-cli -vWebpack的配置：创
原创
2022-12-09 12:02:44
120阅读
基本了解： 当我们开启热部署之后，服务器不用重新加载（我们的项目也不用被重启），我们修改过后的代码就能生效。关于热部署： 重启：Restart 自定义开发代码，包含类、页面、配置文件等，加载位置restart类加载器重载：Reload jar包，加载位置base类加载器需要添加maven坐标：<dependency>
<g
转载
2023-09-23 01:39:15
694阅读
一、HtmlWebpackPlugin webpack插件安装： npm install html-webpack-plugin --save-dev // 版本太高构建报错原因换这个 npm install html-webpack-plugin@3.2.0 --save-dev webpack.
转载
2020-10-30 14:58:00
179阅读
轻松理解webpack热更新原理
转载
2022-11-11 20:31:37
118阅读
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创
2022-05-10 10:26:25
1407阅读
点赞
8.webpackWebpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：https://www.webpackjs.com/官网给出的解释：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
原创
2022-03-04 15:39:42
68阅读
