开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如果index.html不直接位于输出根中，如何为webpack-dev-server配置各种路径选项？

对于webpack-dev-server的路径配置，可以通过以下几种方式来实现：

使用output.publicPath配置项：在webpack配置文件中，可以通过设置output.publicPath来指定webpack-dev-server的路径选项。publicPath表示webpack在打包时生成的文件在浏览器中的访问路径。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将publicPath设置为"/public/"，这样webpack-dev-server会将打包后的文件输出到public文件夹，并且在浏览器中访问时会自动添加"/public/"前缀。
使用devServer.contentBase配置项：在webpack配置文件中，可以通过设置devServer.contentBase来指定webpack-dev-server的根目录。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将contentBase设置为path.resolve(__dirname, 'public')，这样webpack-dev-server会将public文件夹作为根目录，并且在浏览器中访问时会自动查找index.html文件。
使用devServer.historyApiFallback配置项：在webpack配置文件中，可以通过设置devServer.historyApiFallback来指定webpack-dev-server的路由配置。historyApiFallback用于处理单页应用中的路由问题，当访问的路径不存在时，会自动重定向到指定的页面。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将historyApiFallback设置为{ index: '/public/index.html' }，这样当访问的路径不存在时，会自动重定向到/public/index.html。

需要注意的是，以上配置项可以单独使用，也可以组合使用，根据具体的需求进行配置。另外，关于腾讯云的相关产品和产品介绍链接地址，可以参考腾讯云官方文档进行查阅。

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

有帮助

没帮助

相关·内容

正确的Webpack配置姿势，快速启动各式框架！

本文介绍一些Webpack常用或者有意思的一些配置，教你快速启动各种框架（这里主要是React和Angular）。该篇我们不聊原理，只讲实战。...babel-loader将ES6/ES7语法编译生成ES5，当然有些特性还是需要babel-polyfill支持的（Babel默认只转换新的JavaScript句法，而不转换新的API，如Promise...由于plugin可以携带参数/选项，需要在wepback配置中，向plugins属性传入new实例。这里也介绍几个常用的插件： 1....HtmlwebpackPlugin 功能有下：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个...webpack-dev-server是webpack官方提供的一个小型Express服务器，主要提供两个功能：为静态文件提供服务自动刷新和热替换(HMR) 在实际开发中，webpack-dev-server

1.5K3 0

webpack使用来打包前端代码

输出文件路径对main.js进行处理： webpack src/js/main.js -o dist/bundle.js 注意如果提示没有webpack-cli,安装: npm install webpack-cli...image 在项目根目录中创建webpack.config.js 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径..., 'src/js/main.js'), // 项目入口文件 output: { // 配置输出选项 path: path.resolve(__dirname,...'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名 } } 4.实现webpack的实时打包构建...--open --port 3000 --contentBase src --hot" --open表示自动打开 --port 3000 端口3000 --contentBase src根路径

1.3K1 0

Vue 07.webpack

, 'src/js/main.js'), // 项目入口文件 output: { // 配置输出选项 path: path.resolve(__dirname, 'dist'), // 配置输出的路径...表示打开的端口号为4321，--hot表示启用浏览器热更新，--contentBase src表示已src作为打开的根路径 "dev": "webpack-dev-server --hot --port...); module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件 output: { // 配置输出选项...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名 }, plugins...插件会自动把bundle.js注入到index.html页面中打包非 JS 文件 webpack默认只能打包处理 JS 类型的文件，无法处理其它的非 JS 类型的文件，如果要处理非JS类型的文件，需要手动安装一些合适第三方

7822 0

Webpack（三）：使用 plugin 以及本地服务器搭建

Note：另外还要注意，前面我们说过，webpack 认为 index.html 位于 dist 中，所以导致了路径出错，我们是通过配置 output.publicPath 或者 url-loader.options.publicPath...但是现在 index.html 确实位于 dist 中了，所以我们也可以把这两个配置改回来了。...这时候可能会有如下思路：（1）首先，webpack-dev-server.cmd 其实就位于 node_modules/.bin 文件夹中，我可以选择直接执行 node_modules/.bin/webpack-dev-server...（2）第二个方法，全局安装 webpack-dev-server。这个当然没问题了，这样的话我不管在哪个路径下运行指令，这个指令总能被找到。但是这个方法不推荐，因为有版本冲突问题。...第二个问题，如果我们直接打包，会发现在 build 下输出了 dist 文件夹，这是因为我们之前是这样配置 output.path 的： output:{ path:path.resolve(_

1K4 0

webpack 简单配置

3.建立项目的webpack 文件　　　　首先初始化目录: npm init 　　　　然后安装webpack: npm install webpack --save-dev 　　如果webpack 的配置文件不使用默认的文件名...那么执行的命令为 : npm run webpack 　　4.配置: 　　　　(1) Entry 应用程序的起点入口，可以是一个文件，如果传递一个数组，那么那么数组的每一　　　　　　项都会执行，也可以是一个对象.../app/entry-b2"] }, 　　　　(2) Output 位于对象最顶级键(key),包括了一组选项，指示webpack 如何输出，　　　　　　以及哪里输出，和他你所打包或使用webpack..., "dist"), // string 　　　　　　　　　　　　// 所有输出文件的目标路径　　　　　　　　　　　　// 必须是绝对路径（使用 Node.js 的 path 模块）　　　　　　　　　　　　...--save-dev 　　　　　　　　在 package.json 中的 scripts 中添加 "start": "webpack-dev-server" 　　　　　　　　devServer: {

8527 0

面试官常问的那些webpack插件-超详细总结

Plugin ❝何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。...HotModuleReplacementPlugin是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可。...}, inject: true, }), ] inject 有四个选项值 true：默认值，script 标签位于 html 文件的 body 底部 body：script 标签位于...html 文件的 body 底部（同 true） head：script 标签位于 head 标签内 false：不插入生成的 js 文件，只是单纯的生成一个 html 文件多页应用打包有时，我们的应用不一定是一个单页应用...require('webpack-parallel-uglify-plugin') plugins: [ new ParallelUglifyPlugin({ //cacheDir 用于配置缓存存放的目录路径

1.3K1 0

Vue 打包上线后的缓存问题

问题描述大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码： <...解决原理由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。...那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。让静态资源有缓存好办，问题在于怎么只让index.html不缓存。...具体实现如果你是Nginx： Ngnix还是比较容易实现的，只需增加以下配置： location = /index.html { add_header Cache-Control "no-cache...'/vue_workspac/aihuhuproject/' : '/', //基本路径 publicPath: '/',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'

4.9K2 0

WebPack 模块化打包工具（上）

，我们需要在终端输入很长的命令，而在实际开发中，我们是通过另一种方法进行打包的我们先在 WebPack 的根目录下新建一个名为webpack.config.js的文件，并在其中写入下面的配置代码，主要涉及到的内容是入口文件路径和打包后文件的存放路径...文件中的配置选项除了这种方式之外，我们还可以对 npm 进行配置，在package.json文件中对scripts对象进行相关设置，然后在命令行中使用npm start命令即可运行 { "name...npm i webpack-dev-server -D devserver作为 webpack 配置选项中的一项，以下是它的一些配置选项，更多配置可参考 DevServer devserver的配置选项...功能描述 contentBase 默认 webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到 public...HTML5 history API，如果设置为 true，所有的跳转将指向 index.html // webpack.config.js module.exports = { devtool

5235 0

webpack

webpack4.x 和 5.x 的版本中：默认的打包入口文件为 src/index.js 默认的输出文件路径为 dist/main.js 找不到入口文件会报错，如更改 src 文件夹和更改 index.js...会覆盖webpack.config.js中的model选项 } 执行 npm run dev 命令后，会发现生成的 js 文件、图片文件（只有 base64 格式的图片会生成）和 index.html...limit=300&outputPath=images" } outputPath 选项可以指定图片文件的输出路径没有及时删除 dist 再重新 npm run build 会出现以下下问题 5.3...6.2 解决默认 Source Map 的问题开发环境下，在 webpack.config.js 中添加以下配置，就可以实现运行时报错的行数和源代码的行数保持一致生产环境中，如果省略 devtool...选项，那么生成的文件中不包含 Source Map。

1.6K3 0

55. Vue webpack的基本使用

，如果引入到index.js中直接执行，则会报错。...3.2.5 运行webpack 入口文件路径输出文件路径对main.js进行处理： webpack src/main.js dist/bundle.js 但是，如果直接这样执行，在webpack4就会发现报错如下...拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建； 3.3 webpack-dev-server的基本使用 3.3.1 如果我们频繁修改代码，但是每次都要手动输入webpack...image-20200302233421219 3.3.4 启动了server服务之后，输入文件的路径修改为 / 根路径 ?...但是如果像这样直接在index.html引入样式文件的话，那么则会造成二次请求，最好将css的引入操作也写到main.js中，一起打包为bundle.js单一文件。

1.5K2 0

十七.Webpack的使用

输出文件路径对main.js进行处理： webpack src/js/main.js dist/bundle.js 使用webpack的配置文件简化打包时候的命令在项目根目录中创建webpack.config.js...由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径： //path 模块提供了一些用于处理文件路径的小工具...output: { // 配置输出选项 path: path.resolve(__dirname, 'dist'), // 配置输出的路径...运行npm i webpack-dev-server -D安装到开发依赖安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名

6392 0

vue 学习笔记第四弹 - Webpack

使用webpack配置文件简化打包命令在项目根目录中创建webpack.config.js 在运行webpack命令时，webpack需要指定入口文件和输出文件的路径，因此，我们还要在webpack.config.js...'), // 项目入口文件 output: { // 配置输出选项 path: path.resolve(__dirname, 'dist'), // 配置输出的路径...运行npm install webpack-dev-server --save-dev安装到开发依赖在完成安装之后，直接运行webpack-dev-server来进行打包，如果发现报错，这时需要借助于...文件，需要修改index.html中script的src属性为: 为了能在访问http://localhost:8080/的时候直接访问到index.html，可以使用--contentBase src...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名

8642 0

webpack 学习笔记系列05-devserver

配置文件并将打包到内存中。...建议将命令写到 package.json 中，同时支持使用选项参数： # 修改 port 和 host $ webpack-dev-server --port 3000 --host 127.0.0.1...可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局 HMR，可以在不刷新页面的情况下，直接替换、增删模块。...devServer.publicPath：设置内存中的打包文件虚拟路径映射，区别于 output.publicPath devServer.staticOptions：配置 express.static...devServer.noInfo：不输出启动 log devServer.lazy: 不监听文件变化，而是当请求来时再重新编译 devServer.watchOptions：watch 相关配置，如修改监测间隔

2.3K13 0

Webpack学习总结

，而如果脚本名称不是 start，需执行 npm run {script name} 如 npm run build npm start 4....配置选项功能描述 contentBase 默认为根文件夹提供本地服务器（本例设置到“public”目录） port 设置默认监听端口，默认为”8080“ inline 设置为true，当源文件改变时自动刷新页面...historyApiFallback 依赖 HTML5 history API，如果设置为true，所有跳转将指向index.html（开发单页应用）修改配置文件 webpack.config.js...Babel 为简化Babel配置，把babel的配置选项单独放在 .babelrc 配置文件中（webpack会自动调用） module.exports = { ......，一次处理一个 Plugins 直接作用于整个构建过程，不直接操作单个文件 5.2 使用插件 5.2.1 实例1：banner-plugin 添加版权声明插件，插件地址：https://webpack.js.org

2.6K6 0

前端工程化与webpack

/dist'),//输出文件的存放路径 filename:'bundle.js' //输出文件的名称 } } webpack中的插件 wepack插件的作用通过安装和配置第三方的插件...严格遵守开发者在 webpack.config.js中指定配置根据 output节点指定路径进行存放 ② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中不再根据...output节点指定的路径，存放到实际的物理磁盘上提高了实时打包输出的性能，因为内存比物理磁盘速度快很多访问生成到内存中的文件 webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中...目录中修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径： { test: /\.jpg|...devtool 选项，则最终生成的文件中不包含 Source Map。

6172 0

webpack超详细教程！入门一篇就够了

） webpack 要打包的文件路径打包输出的文件路径方法二：通过 webpack.config.js 配置文件来打包文件因为 webpack 是基于 node 开发的打包工具，所以在 webpack.config.js...就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建如果 webpack...注意: webpack-dev-server 这个工具是依赖于 webpack 的，要想使用这个工具，就必须安装 webpack webpack-dev-server 打包的文件会直接存放在内存中添加参数...它其实会开启一个本地的服务器 --open 表示：保存时重新打包，并打开浏览器 --port端口号表示：开启本地服务器的访问端口号 --contentBase路径表示：指定根路经 --hot 表示：...exclude 选项排除掉，原因有两个：如果不排除 node_modules ，则会把 node_modules 中所有的第三方 JS 文件都打包编译，这样会非常消耗CPU，同时，打包速度非常慢；

9.2K5 2

Webpack学习总结【原创】

，而如果脚本名称不是 start，需执行 npm run {script name} 如 npm run build npm start 4....配置选项功能描述 contentBase 默认为根文件夹提供本地服务器（本例设置到“public”目录） port 设置默认监听端口，默认为”8080“ inline 设置为true，当源文件改变时自动刷新页面...historyApiFallback 依赖 HTML5 history API，如果设置为true，所有跳转将指向index.html（开发单页应用）修改配置文件 webpack.config.js...Babel 为简化Babel配置，把babel的配置选项单独放在 .babelrc 配置文件中（webpack会自动调用） module.exports = { ......，一次处理一个 Plugins 直接作用于整个构建过程，不直接操作单个文件 5.2 使用插件 5.2.1 实例1：banner-plugin 添加版权声明插件，插件地址：https://webpack.js.org

2.4K14 1

（非软文）Webpack从入门到实战搭建Vue脚手架（一万字总结）

/src/main.js', // output: 配置输出 (打包到哪去) output: { // 打包输出的目录 (必须是绝对路径) path: path.join(__...中手动引入打包后的资源，是有缺点的比如: 如果webpack 配置中的输出文件名修改了，需要及时在 index.html 中同步修改下载 (-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的...limit, 可以设置一个临界值, 大于这个值会整个文件直接打包到目录中, 得到是路径, 如果小于这个值, 就会转成 base64, 节约请求的次数 { test: /\....默认是直接输出到了 dist 根目录, 可以通过 options 进行配置 { test: /\..../src/main.js', // 出口 output, 打包到哪里去 output: { // 打包输出的目录 (输出的目录必须是一个绝对路径) path: path.join

1.2K1 0

10天从入门到精通Vue(五)Webpack打包

输出文件路径对main.js进行处理： webpack src/js/main.js dist/bundle.js 使用webpack的配置文件简化打包时候的命令在项目根目录中创建webpack.config.js...由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径： // 导入处理路径的模块 var...module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件 output: { // 配置输出选项...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名

4793 0

前端工程化：Webpack之常见配置详解

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定： ① 默认的打包入口文件为 src -> index.js ② 默认的输出文件路径为 dist -> main.js 注意：...可以在 webpack.config.js 中修改打包的默认约定因此，在运行npm run dev后，系统会默认将src -> index.js文件，打包输出到dis -> main.js 疑问：那项目中其他的文件如...⚫ 根据 output 节点指定路径进行存放 ② 配置了 webpack-dev-server 之后，打包生成的bundle.js文件存放到了内存中 ⚫ 不再根据 output 节点指定的路径，...loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组 // 打包处理样式表中与 url 路径相关的文件 // 需要预先安装模块 npm i...image 目录中修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径： image.png 5.

1.3K1 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭