Webpack-dev-server在src-file旁边创建js文件，而不是编译成目标bundle-file

Webpack-dev-server是一个基于Webpack的开发服务器，它提供了一个实时的开发环境，能够自动编译和刷新页面，方便开发人员进行前端开发调试。

在默认配置下，Webpack-dev-server会将编译后的文件存储在内存中，而不是生成实际的目标bundle文件。这样做的好处是可以提高开发效率，减少磁盘IO操作，加快编译速度，并且可以避免频繁的文件读写操作对硬盘的损耗。

当我们启动Webpack-dev-server时，它会将编译后的文件输出到内存中的一个虚拟目录，并通过一个虚拟路径来访问这些文件。这些虚拟文件可以通过在浏览器中访问相应的URL来获取，而不是在本地文件系统中查找。

这种方式可以确保我们在开发过程中对文件的修改能够立即生效，而不需要手动重新编译和刷新页面。同时，由于文件是存储在内存中的，所以访问速度更快，对于开发调试来说非常方便。

在使用Webpack-dev-server时，我们可以通过配置来指定编译后文件的输出路径，以及访问这些文件的虚拟路径。具体的配置可以在Webpack的配置文件中进行设置。

总结一下，Webpack-dev-server是一个方便的开发服务器工具，它能够在开发过程中实时编译和刷新页面，提高开发效率。它将编译后的文件存储在内存中，并通过虚拟路径来访问这些文件，避免了频繁的文件读写操作。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React快速入门

正好旁边前端的兄弟最近在学习React，为了更深入的了解前端的业态，也果断来学习一发，目标是有个基础的了解，需要时能快速上手就OK，说实话，个人并不是很喜欢它的这种推翻MVC的思路，这个思路和原来的微软的...Babel:可以将ES6代码编译成ES5代码，npm install babel-cli -g, babel es6.js -o compiled.js Tip: 此外可以参看30分钟掌握ES6或者阮一峰大神的相关文章...React 特点：一切基于组件；JSX，可以将类似HTML的结构编译成Javascript，说实话，个人不是很顶这个思路。...Flux是React推出的一个前端架构思路，而Redux是对该思路的一个很好的实践。.../template/" + name + ".jade"); 模块热切换：webpack-dev-server --hot 安装使用 npm install webpack -g webpack main.js

6808 0

TypeScript的编译与运行

devServer: { port: 8080 } } 'cheap-module-eval-source-map'是官方推荐的一个配置项，其中module会定位到TS的源码而不是编译后的...": "^4.15.1", "webpack-merge": "^5.10.0" } } 这个文件是之前自动创建好的，我们先修改一个入口 "main": "index.js", --> ".../src/index.ts", 修改启动参数在scripts块中加入"start":"webpack-dev-server --mode=development --config=..../build/webpack.config.js" 这里主要是指定了环境变量mode的值为development，并指定了config文件的路径。...我们在浏览器中输入这个地址看一下现在还只是一个空白页面，我们修改一下index.ts文件，将字符串插入到页面中。 let str1 : string = "Hello TS!"

2590 0

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

2.使用一些额外的配置设置创建 package.json 文件 npm init 我在我们新创建的 package.json 文件中添加了一些东西，比如一些很好的 keywords，一个repo等等.....之后，在根目录下创建 src 文件夹，然后在 src 下分别创建 index.html 和 index.js. 1.Linux / MacOS 命令 mkdir src touch src/index.html...但是，由于我们没有配置webpack.config.js 文件，所以页面展示并不是我们想要的内容。如果想停止服务，只需在命令行中同时按下 CTRL + C 键。...它的作用是在 node 环境中，直接运行 es2015 的代码，而不需要额外进行转码。例如我们有一个 js 文件以 es2015 的语法进行编写(如使用了箭头函数)。...我们需要告诉我们的脚本在 Webpack 的配置文件中，使用 import 而不是 require 语句。否则它会给我们一个错误，它不知道import 表示什么。

9.4K6 0

你需要知道的webpack高频面试题

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等代码分割：提取多个页面的公共代码、.../src/pageTwo/index.js' }}webpack-dev-server和http服务器如nginx有什么区别？...模式下url不用发生变化，但启动inline模式分两种情况// 以命令行启动webpack-dev-server有两种方式// 方式1 在命令行中添加--inline命令// 方式2 在webpack-config.js...添加devServer:{inline: true}// 以node.js API启动有两种方式// 方式1 添加webpack-dev-server/client?...，一次是创建子类型原型，另一次是在子构造函数内部原型式继承重点：执行对给定对象的浅复制function object(obj){ function F(){} F.prototype=obj

5082 0

你需要知道的webpack高频面试题_2023-03-15

6772 0

详解从 0 发布 react 组件到 npm 上

开发组件创建项目文件夹并初始化 npm package ，确保你创建的组件名称没有在 npm 上被使用过，这里我们用 react-demo 作为示例 mkdir react-demo cd react-demo...然后我们再创建如下的目录结构： ├── example // 示例代码，在自己测试的时候可以把测试文件放到 src 里 │ └── src // 示例源代码 │ ├── index.html.../src 中导入的接下来配置非常简单的 webpack, 在项目根路径下创建 webpack.config.js 文件 const path = require('path'); const HtmlWebpackPlugin...name: 包名，如果你学习的话建议加一个 scoped，就是我上面的 @taoweng/react-demo 而不是 react-demo，因为 npm 包特别的多，很容易重复。...参考文章从 0 开始发布一个 react 组件到 npm 创建并发布一个小而美的 npm 包，没你想的那么难！

1.6K1 0

55. Vue webpack的基本使用

image-20200302212347588 在这里项目中，创建了图中的相关文件目录，主要的用途如下： dist ：用于构建生存压缩文件，例如 bundle.js 等压缩文件。...image-20200302214611035 当安装完毕，就会自动在项目目录下创建一个node_modules的文件夹。 3.2.4 在index.html中直接引入main.js ?...3.2.6 采用webpack的配置文件进行打包首先创建webpack的配置文件webpack.config.js，如下： ?...匹配和处理规则； webpack 处理第三方文件类型的过程：发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方 loader 规则如果能找到对应的规则，就会调用...loader 规则可以看到启动服务后，已经编译成功。

1.5K2 0

Webpack高级配置实战

/webpack-demo// 创建 src 文件夹mkdir src// 创建 js文件touch index.jstouch hello.jsindex.js：// index.jsimport '...新建配置文件development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。为代码清晰简明，为每个环境编写彼此独立的 webpack 配置。.../config// 创建通用环境配置文件touch webpack.common.js// 创建开发环境配置文件touch webpack.dev.js// 创建生产环境配置文件touch webpack.prod.jswebpack-merge...DevServer在每次编译代码时，手动运行 npx webpack --config config/webpack.prod.js 会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码...安装：npm install --save-dev webpack-dev-server修改开发环境配置文件 webpack.dev.js：module.exports = merge(common,

1.2K4 0

Webpack配置实战

/webpack-demo// 创建 src 文件夹mkdir src// 创建 js文件touch index.jstouch hello.jsindex.js：// index.jsimport '...新建配置文件development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。为代码清晰简明，为每个环境编写彼此独立的 webpack 配置。.../config// 创建通用环境配置文件touch webpack.common.js// 创建开发环境配置文件touch webpack.dev.js// 创建生产环境配置文件touch webpack.prod.jswebpack-merge.../src/index.js', },})5. 输出（output)output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。...DevServer在每次编译代码时，手动运行 npx webpack --config config/webpack.prod.js 会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码

1.2K4 0

Ubuntu操作指令

---- 文件或目录处理命令查看当前目录下文件后缀： -a：显示所有文件，包括隐藏文件(以.开头的文件) -l：以长格式显示 -F：在每个文件名后附上一个字符以说明该文件的类型，“*”表示可执行的普通文件...-d：将目录象文件一样显示，而不是显示其下的文件 -t：按修改时间先后显示 -R：显示目录及下级子目录结构 -m: 横向输出文件名，并以“，”作分格符。 -S: 以文件大小排序。.../为当前目录- 切换到上一次所在的目录查看当前工作目录 pwd （print working directory）创建 mkdir directory-name （make directory）创建文件夹...rm -rf directory-name 强制并递归删除文件夹复制文件 cp –afpx src-file dst-file （copy file）后缀： •-a：尽可能保持文件的结构和属性 •...-p：保持原始文件日期 •-f ：如果目标文件已经存在，则覆盖它 •-i ：提示是否覆盖现有的普通目标文件 •-r：包含子目录移动文件 mv –b src-file dst-file（move file

3611 0

webpack从零搭建开发环境

什么是 webpack 使用 webpack 作为前端构建工具代码转化:TypeScript编译成Javascript,SCSS编译成Css等文件优化:压缩JavaScript、Css、Html代码...可以在 base 文件合并可以创建 dev，prod 分别在这两个文件中合并 base "scripts": { "build": "webpack --env.production --config.../dist') //webpack启动服务会在dist目录下 } } 在 dist 打包自动生成 html 文件并且引入打包后的 js 内容 npm i html-webpack-plugin...--save-dev 在根文件下创建 public 文件夹 plugins:[ new HtmlWebpackPlugin({ template:path.resolve...文件调用@babel/core test:/\.js$/, use:"babel-loader" }, 创建 .babelrc文件默认是 options 的配置 {

1.3K2 0

webpack配置React开发环境(上)

(压缩成一行) webpack --watch —— 持续编译 webpack -d —— 编译完成后包含一个maps文件 wepack --colors —— 使压缩文件变漂亮(我暂时没看出来) 在开发应用程序时...，可以在package.json文件中编写scripts字段，如下所示: // package.json { // ......=production webpack -p" }, // ... } 入口文件入口文件是一个Webpack将会读取它并将它编译成bundle.js的文件 demo01:单个入口文件： //...例如，Babel-loader可以将JSX / ES6文件转换为JS文件。官方文档有一个完整的加载器列表。...（1）在命令行中指定--hot和--inline $ webpack-dev-server --hot --inline 选项的含义： --hot: 添加HotModuleReplacementPlugin

1.6K13 0

彻底搞懂并实现 webpack 热更新原理

预期是保留用户名、密码的输入内容，而只替换邮箱这一模块。这一诉求就需要借助webpack-dev-server的热模块更新功能。...启动webpack-dev-server服务器，源代码地址@webpack-dev-server/webpack-dev-server.js#L173 创建webpack实例，源代码地址@webpack-dev-server.../webpack-dev-server.js#L89 创建Server服务器，源代码地址@webpack-dev-server/webpack-dev-server.js#L107 添加webpack的...创建express应用app，源代码地址@webpack-dev-server/Server.js#L123 设置文件系统为内存文件系统，源代码地址@webpack-dev-middleware/fs.js.../Server.js#L135 使用sockjs在浏览器端和服务端之间建立一个 websocket 长连接，源代码地址@webpack-dev-server/Server.js#L745 创建socket

2.9K1 0

12. Vue搭建本地服务

我们还可以启动服务后直接打开浏览器可以在命令行后面加一个--open "dev": "webpack-dev-server --open" 二....第一步: 创建一个目录build, 然后在里面创建三个文件 1. base.config.js 2. dev.config.js 3. prod.config.js ?.... --- 当文件来处理, 就需要打包成文件, 需要file-loader // 这是加载的文件目录是根目录, 结果找不到文件, 所以也不显示, 我们可以在...这个插件可以帮助我们将两个配置文件进行合并 npm install webpack-merge@3.0.0 然后在dev.config.js和prod.config.js中引入base.config.js...", //publicPath:"dist/" }, .... } 第四步: 在package.json中指定配置文件默认读取的配置文件是webpack.config.js,

9502 0

搞懂webpack热更新原理

1K1 0

webpack5热更新打包TS

": "^3.11.2" 此时需要在根目录下创建webpack.config.js文件，这个文件的配置在此系列上一篇文章中已经有写过，不过现在需要多增加devServer和plugins配置。..." } 注意：这里千万要注意，start的运行命令要写作webpack serve而不是webpack-dev-server 因为使用webpack-dev-server是webpack5以前的方式了...然后我又开始疯狂找原因，进入错误的文件夹webpack-dev-server\client下面，找到index.js文件。发现错误都出现在require导入中。...所以需要在webpack.config.js中配置target 具体配置可查官网：https://webpack.docschina.org/configuration/target/ 构建目标(Targets...target 告知 webpack 为目标(target)指定一个环境。

2.1K1 1

npm run dev 后 webpack-dev-server 做了哪些事情

在终端执行npm run dev，拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。...在终端执行npm run dev，拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。...、设置、查看或删除环境变量 rem ~为扩展符号，它和不同的字母结合时所代表的含义不同，%0 代表批处理文件名本身，而 %~dp0 则表示了 %0 文件的路径信息 SET dp0=%~dp0 EXIT..." 及 ">>" 符号的左边是数据源，">" 会替换目的数据，而">>" 符号只是将数据源添加到目标数据后 endLocal & goto #_undefined...代码的其余部分使用命令行上下文而不是批处理上下文执行。

1.8K4 0

前端基础:node.js、npm、webpack、React.js

npm install webpack@1.15.0 --save-dev webpack -v webpack.config.js ●entry : js的入口文件 ●externals :外部依赖的声明...●output: 目标文件 ●resolve :配置别名 ●module :各种文件，各种loader ●plugins :插件 Webpack Loaders html html-webpack-plugin...作用:前端开发服务器特色:可以在文件改变时，自动刷新浏览器安装: npm install webpack-dev-server一save-dev 配置: webpack-dev-server...webpack-dev-server@2.9.7 --dev 解决多版本共存问题 5 React基础视图层框架一个构建用户界面的框架声明式的框架数据驱动DOM，再用事件反馈给数据组件化开发组件组合而不是继承...对于如下 js，由于引入了 react，肯定无法直接引入该 js 文件吧 ? 这时就需要 webpack 对这些文件打包。

2K1 0

前端基础:node.js、npm、webpack

●entry : js的入口文件 ●externals :外部依赖的声明 ●output: 目标文件 ●resolve :配置别名 ●module :各种文件，各种loader ●plugins...热加载 webpack-dev-server 作用:前端开发服务器特色:可以在文件改变时，自动刷新浏览器安装: npm install webpack-dev-server一save-dev...extract-text-webpack-plugin 样式打包成单独文件 CommonsChunkPlugin 提出通用模块 webpack-dev-server 为webpack项目提供web...webpack-dev-server@2.9.7 --dev 解决多版本共存问题 5 React基础视图层框架一个构建用户界面的框架声明式的框架数据驱动DOM，再用事件反馈给数据组件化开发组件组合而不是继承...比较操作前后的数据差异如果有数据差异，统一操作DOM 为何使用虚拟 dom 实现原理对于如下 js，由于引入了 react，肯定无法直接引入该 js 文件吧这时就需要 webpack 对这些文件打包

2K4 0

webpack热更新原理(面试大概率会问)_2023-02-28

搭建webpack环境创建一个项目 mkdir dev-erver && cd dev-server npm init -y // 快速创建一个项目配置 npm i webpack webpack-dev-server...webpack-cli --save-dev mkdir src // 创建资源目录 mkdir dist // 输出目录 touch webpack.dev.js // 因为是在开发环境需要热更新，..., output.js 对应你在webpack配置文件中的输出文件，配置的是什么就访问什么 http://localhost:8080/output.js 显然我们想看效果而不是打包后的代码，所以我们在...第三步是 webpack-dev-server 对文件变化的一个监控，这一步不同于第一步，并不是监控代码变化重新打包。...而第 10 步是决定 HMR 成功与否的关键步骤，在该步骤中，HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用

8462 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云