本文的路径配置主要涉及到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基础命令---文本统计paste

    paste 将文件以行的方式合并在一起,用tab字符分隔开,将结果送到标准输出.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语 ...

  2. 转：wcf大文件传输解决之道（1）

    首先声明,文章思路源于MSDN中徐长龙老师的课程整理,加上自己的一些心得体会,先总结如下: 在应对与大文件传输的情况下,因为wcf默认采用的是缓存加载对象,也就是说将文件包一次性接受至缓存中,然后生成 ...

  3. vue使用tradingview开发K线图相关问题

    vue使用tradingview开发K线图相关问题 1.TradingView中文开发文档https://b.aitrade.ga/books/tradingview/CHANGE-LOG.html2 ...

  4. Token：共识的下一个100年，区块链技术是无可阻挡的文明进程

    Token:共识的下一个100年,区块链技术是无可阻挡的文明进程.很少有人意识到,区块链的应用——Token可能是近100年来最伟大的制度创新,超越股份制,并将是『债券』之后最重要最主流的交易品种,没 ...

  5. [转载]C#中IndexOf的使用

    注:此方法无法找出目标字符串第二次.第三次等出现的位置. 具体代码如下所示: 1 2 3 4 5 var array=['REG','2018','2018'];   array.indexOf(‘R ...

  6. [转载]Oracle ltrim() 函数用法

    前面有说到过LPAD和RPAD这两个函数用法的文章,今天发现与之相反意义的另外两个函数,那就是LTRIM() RTRIM(). 这次就挑LTRIM() 这一函数来讲讲: 具体的语法格式如下: LTRI ...

  7. socket聊天的业务逻辑

        一.主要思想:     1.如果用户A想要发消息给用户B,A需要将消息发送到一个服务器上,服务器接收到A发送的消息之后,再把消息发送给B,B接收到消息     2.当用户B断开连接时服务器不会 ...

  8. JOBDU 题目1100：最短路径

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5786 解决:902 题目描述: N个城市,标号从0到N-1,M条道路,第K条道路(K从0开始)的长度为2^K,求编号为0的城市到其他城市的 ...

  9. 第一个django项目-通过命令行和pycharm两种方式

    以本机环境为例,ip地址为172.20.16.148,windows平台,虚拟环境路径为d:\VirtualEnv,项目存放位置为d:\DjangoProject 命令行方式 1.进入虚拟环境创建项目 ...

  10. flask模板，路由,消息提示，异常处理

    1.flask的路由与反向路由 from flask import Flask, request, url_for app = Flask(__name__) @app.route('/') def ...