本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置

webpack-dev-server定义

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即output中的配置:

    output: {

        path: './dist/js',

        filename: 'bundle.js'

    }

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

配置实践

前提：

1.项目的目录结构如下：

    app
    |__content
    | |__index.html

    |__src

    | |__index.js

    |__node_modules

    |__package.json

    |__webpack.config.js

2.package.json添加start命令,配置完成后运行npm start命令，打开浏览器访问http://127.0.0.1:8080/
  "scripts": {

    "start": "webpack-dev-server"

  },

配置一：
webpack.config.js配置
    //应用程序的起点入口。这个起点开始，应用程序启动执行
    entry: './index.js',

    output: {

        filename: 'bundle.js',

    },

    devServer: {

        inline: true,

        contentBase: './content',

    },

index.html内容：注意script src的值

<!doctype html public "storage">

<html>

<meta charset=utf-8/>

<title>My First React Router App</title>

<div id=app></div>

<script src="bundle.js"></script>

结论一：contentBase告诉服务器从哪个目录提供内容，只有在加载静态文件时才需要。上面index.html在项目的content文件夹下，所以contentBase值为'./content'。

配置二：

webpack.config.js

    entry: './index.js',

    output: {

        filename: 'bundle.js',

        path: path.resolve(__dirname, 'dist'),

        publicPath: '/asset/',

    },

    devServer: {

        inline: true,

        contentBase: './content',

    },

html配置

<!doctype html public "storage">

<html>

<meta charset=utf-8/>

<title>My First React Router App</title>

<div id=app></div>

<script src="asset/bundle.js"></script>

运行结果：项目根目录没有生成dist文件夹，浏览器中正常显示‘Hello, React Router ’

结论二：output中的path是生成目标文件的绝对路径，但是目标文件路径中是看不到编译后的文件，因为webpack-dev-server实时编译的文件都保存到了内存中

结论三：output中的publicPath是访问output生成的文件的路径（是一个访问路径，不需要对应真实的文件路径），所以在html中需要将src设置为'asset/bundle.js'

配置三：

webpack.config.js

    entry: './index.js',

    output: {

        filename: 'bundle.js',

        path: path.resolve(__dirname, 'dist'),

        publicPath: '/asset/',

    },

    devServer: {

        inline: true,

        contentBase: './content',

        publicPath: '/new/asset/',

    },

html配置

<!doctype html public "storage">

<html>

<meta charset=utf-8/>

<title>My First React Router App</title>

<div id=app></div>

<script src="new/asset/bundle.js"></script>

结论四：devServer中的publicPath配置会覆盖output中的publicPath配置

文档

官方说明

文章参考

webpack插件配置（一） webpack-dev-server 路径配置的更多相关文章

  1. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  2. webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

    ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...

  3. 从0开始编写webpack插件

    1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...

  4. webpack插件之webpack-dev-server

    webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

  5. webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

  6. webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...

  7. VS 配置外部DLL的引用路径【可执行文件的环境路径】

    右键项目,属性->配置属性->调试->环境,在这里写入可执行文件运行时的环境路径,格式为:PATH=ABC,如PATH=$(SolutionDir)/env 这样,我们就可以把运行时 ...

  8. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  9. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

随机推荐

  1. Linux基础命令---ipcalc计算IP

    ipcalc        ipcalc提供了一种计算主机IP信息的简单方法.各种选项指定ipcalc应该在标准输出上显示什么信息.可以指定多个选项.必须始终指定要操作的IP地址.大多数操作还需要一个 ...

  2. Fiddler4入门--手机抓包工具安装和使用说明

    Fiddler4入门--手机抓包工具安装和使用说明.电脑最好是笔记本连同一个wifi,这样能和手机保持统一局域网内. 很多区块链dapp项目方风控做的很差,利用fiddler抓包分析找一些漏洞,然后利 ...

  3. Linux下java nohup 后台运行关闭后进程停止的原因，不挂断后台运行命令

    Linux下java nohup 后台运行关闭后进程停止的原因,不挂断后台运行命令 今天写sh脚本发现一终止命令程序就停止运行了,检查了很久才发现后面少了个&字符导致的!错误写法:nohup ...

  4. JustOj 2039: 成绩排名 （结构体排序）

    题目描述 每次期末考试成绩出来之前的一段时间大豪哥心里都是痛苦的,总感觉自己会在班上排名特别差.所以当成绩出来以后大豪哥想快点知道班上的总排名,以便知道自己的排名.(PS:大豪哥班上有个学霸名叫日天, ...

  5. ajax处理文件下载

    ajax中处理文件下载,可能大数会遇到我和一样的问题,什么问题呢?就是下载程序执行了,但是浏览器没有任何下载操作,这是为什么呢? 那是因为response原因,一般请求浏览器是会处理服务器输出的res ...

  6. P1290 欧几里德的游戏

    P1290 欧几里德的游戏 原本不想写的,但细节有些多qwq,还是放上吧. 假设a严格大于b 当a<b*2时,只有一种方法往下走:否则就可以有多种方法,并且一定至少有一种可以使自己必胜,因为可以 ...

  7. Python 使用 face_recognition 人脸识别

    Python 使用 face_recognition 人脸识别 官方说明:https://face-recognition.readthedocs.io/en/latest/readme.html 人 ...

  8. Java能抵挡住JavaScript的进攻吗？

    JavaScript的进攻 公元2014年,Java 第八代国王终于登上了王位. 第一次早朝,国王坐在高高的宝座上,看着毕恭毕敬的大臣,第一次体会到了皇权的威力. 德高望重的IO大臣颤悠悠地走上前来: ...

  9. numpy 学习笔记

    numpy 学习笔记 导入 numpy 包 import numpy as np 声明 ndarray 的几种方法 方法一,从list中创建 l = [[1,2,3], [4,5,6], [7,8,9 ...

  10. keepalived的原理以及配置使用详解

    一.vrrp协议简介 VRRP(Virtual Router Redundancy Protocol)协议是用于实现路由器冗余的协议. VRRP协议将两台或多台路由器设备虚拟成一个设备,对外提供虚拟路 ...