首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

webpack-dev-server未在本地创建dist文件夹

webpack-dev-server是一个基于webpack的开发服务器,用于在本地开发环境中进行前端开发。它提供了实时重新加载(live reloading)和模块热替换(hot module replacement)等功能,可以帮助开发者快速进行开发和调试。

webpack-dev-server并不会在本地创建dist文件夹。dist文件夹通常用于存放打包后的静态资源文件,而webpack-dev-server是在内存中生成打包后的文件,并将其提供给浏览器进行访问。这样做的好处是可以加快开发过程中的编译和加载速度,同时也避免了频繁的磁盘写入操作。

在使用webpack-dev-server时,可以通过配置webpack的output选项来指定打包后文件的输出路径。一般情况下,我们会将打包后的文件输出到内存中,而不是本地磁盘。例如,可以将output的path配置为"/",表示将打包后的文件输出到根目录下。

以下是一个示例的webpack配置文件,演示了如何配置webpack-dev-server:

代码语言:txt
复制
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: '/',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 8080,
  },
  // 其他配置项...
};

在上述配置中,entry指定了入口文件,output中的filename指定了打包后的文件名,path配置为'/'表示输出到根目录下。devServer中的contentBase指定了静态文件的目录,port指定了开发服务器的端口号。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可用于部署和运行各种应用程序和服务。 产品介绍链接:https://cloud.tencent.com/product/cvm
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于存储和管理各种类型的文件和数据。 产品介绍链接:https://cloud.tencent.com/product/cos

以上是关于webpack-dev-server未在本地创建dist文件夹的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

9、webpack从0到1-devServer初探

但是有一个缺点就是,他不会帮我们把浏览器自动刷新,所以我们一般使用webpack-dev-server这个插件来实现更加丰富的功能。...webpack.config.js中,这个插件可以帮助我们在本地起一个服务器,devServer有一系列的参数可以用来配置这个插件。...devServer.port指定本地服务器的端口号。 devServer.open当我们启动服务的时候会自动帮我们打开默认的浏览器。 还有很多配置项提供参考。。。...当我们把dist目录删除后再执行这个命令,虽然浏览器中自动打开也能正常显示,但是不会有新的dist文件夹生成了,因为这个插件不会显式的重复输出生成dist文件了,而是为了提高效率放到了内存里。...webpack-dev-server里面也使用了这个插件,就不展开了,详见官网。 4、小结 这节总的来说目的就是说了下如何来监听文件,让过程自动化,提高我们的开发效率。

62530

55. Vue webpack的基本使用

image-20200302212347588 在这里项目中,创建了图中的相关文件目录,主要的用途如下: dist :用于构建生存压缩文件,例如 bundle.js 等压缩文件。...image-20200302214611035 当安装完毕,就会自动在项目目录下创建一个node_modules的文件夹。 3.2.4 在index.html中直接引入main.js ?...3.3.2 安装webpack-dev-server工具 安装命令: 全局安装 npm i webpack-dev-server -g 本地安装 npm i webpack-dev-server -D...运行cnpm i webpack-dev-server -D 安装到项目本地开发依赖 安装完成之后,在命令行直接运行webpack-dev-server来进行打包,发现报错。...3.10.2.7.1 在项目中,新创建一个images2文件夹,放入另一张图片3.png,改为2.png,如下: ? image-20200307173738026 ?

1.5K20

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

开发组件 创建项目文件夹并初始化 npm package ,确保你创建的组件名称没有在 npm 上被使用过, 这里我们用 react-demo 作为示例 mkdir react-demo cd react-demo...作为本地开发服务器,所以需要安装如下依赖: npm i webpack webpack-cli webpack-dev-server -D 我这里为了简单演示,只安装 babel-loader 用来编译...首先去 Github 创建一个用来存放你组件代码的仓库。 然后把你的项目初始化成 git 项目: git init 再添加远程仓库,将本地仓库和远程仓库关联起来。...我们可以通过 babel-cli 来编译我们代码,直接编译 src 目录,到 lib 文件夹。...参考文章 从 0 开始发布一个 react 组件到 npm 创建并发布一个小而美的 npm 包,没你想的那么难!

1.6K10

vue 学习笔记第四弹 - Webpack

根据官网的图片介绍webpack打包的过程 webpack官网 6. webpack安装的两种方式 全局安装webpack npm install --global webpack 本地安装 npm...类库 创建main.js并书写各行变色的代码逻辑: // 导入jquery类库 import $ from 'jquery' // 设置偶数行背景色,索引从0开始,0是偶数...package.json文件中的指令,来运行webpack-dev-server命令,在scripts节点下新增"dev": "webpack-dev-server"指令,发现可以进行实时打包,但是dist...这个时候访问webpack-dev-server启动的http://localhost:8080/,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js...babel-preset-es2015 babel-preset-stage-0 --save-dev 在webpack.config.js中添加相关loader模块,其中需要注意的是,一定要把node_modules文件夹添加到排除项

85020

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

1、创建文件夹 首先我们手动创建一个文件夹manually,然后在manually下创建src源文件文件夹和发布环境用的dist文件夹 mkdir manually cd manually mkdir...src mkdir dist 2、创建 package.json 文件 该 package.json 文件定义了我们的项目名称,描述,构建命令,依赖的 npm 模块等等。...3、在本地项目安装TypeScript 我们可以通过以下命令,在本地项目进行安装: npm install typescript --save-dev 4、创建 tsconfig.json 文件 tsconfig.json...文件夹中。...这里输出目录是 dist,编译后的文件名是 bundle.js devServer:设置 webpack 开发服务器,根目录是 dist 文件夹,并通过端口9000进行访问 10、最终的项目文件夹 如果你顺利的到了这一步

2.2K10

借助Babel 7和Webpack构建React Toolchain

然后在工程目录下创建以下文件夹: . +-- dist +-- public +-- src 这里注意到我们最终需要构建我们的应用,但是我们并不想提交我们构建生成的文件以及我们使用npm拉取的包目录,所以让我们再创建...它可以与开发时临时的本地服务器一起工作,在我们修改了React的组件之后本地服务器调出的网页可以进行实时的刷新。...为了利用Webpack这些优点,我们需要配置Webpack来使用我们的loaders并设定本地服务器的端口等信息。 下面让我们在工程目录下创建配置文件webpack.config.js。...现在,在src文件夹创建另一个名为App.js的文件。如果你用create-react-app创建过项目的话你会发现下面的文件和它创建出的内容是很相似的。...让我们通过命令行执行webpack-dev-server --mode development来启动我们的本地开发服务器。

1.1K40

关于Webpack前端工程化构建,你必须要掌握这些核心知识点

默认是本地模式安装,本地模式是指在执行npm install命令后,会在执行命令的目录下创建node_modules目录,然后再把下载的依赖和安装包保存到node_modules目录下。...4、配置webpack-dev-server本地服务器 webpack-dev-server 就是一个Express的小型服务器,通过Express的中间件 webpack-dev-middleware...5.1、使用webpack配置React环境 5.1.1、搭建React项目 创建React项目的文件夹,在项目根目录下打开命令提示符,执行初始化命令,生成package.json文件: npm init...文件夹下。...create-react-app是React中最简单的创建单页面程序的方式,安装命令如下: npm install -g create-react-app 在需要创建项目的文件夹下启动命令提示符,使用create-react-app

1.6K60

Webpack系列——关于Webpack-dev-server配置的点点滴滴

我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发,我们在使用之前当然需要安装: npm i webpack webpack-dev-server -D 安装完成之后我们只需要在.../src/main.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, devtool.../dist', hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ] } module.exports...= config; 这里指定webpack-dev-server所做的事情就是以dist文件夹为开启服务器的文件夹位置,并使用热更新。...和服务器对外输出有关 compress:对所有服务启用gzip压缩 contentBase:静态文件的文件夹地址,默认为当前文件夹 headers:在所有的响应中提供首部内容 headers: {

87460

十七.Webpack的使用

webpack的命令 在项目根目录中运行npm i webpack -D安装到项目依赖中 初步使用webpack打包构建列表隔行变色案例 运行npm init初始化项目,使用npm管理项目中的依赖包 创建项目基本的目录结构...使用cnpm i jquery --save安装jquery类库 创建main.js并书写各行变色的代码逻辑: // 导入jquery类库 import $ from 'jquery'.../bundle.js 使用webpack的配置文件简化打包时候的命令 在项目根目录中创建webpack.config.js 由于运行webpack命令的时候,webpack需要指定入口文件和输出文件的路径...,来进行运行webpack-dev-server命令,在scripts节点下新增"dev": "webpack-dev-server"指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js...启动的http://localhost:8080/网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script

62620
领券