本文的路径配置主要涉及到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. 【转】Tomcat 快速入门

    本文转载自:https://www.cnblogs.com/jingmoxukong/p/8258837.html?utm_source=gold_browser_extension 目录 Tomca ...

  2. 转：【专题十二】实现一个简单的FTP服务器

    引言: 休息一个国庆节后好久没有更新文章了,主要是刚开始休息完心态还没有调整过来的, 现在差不多进入状态了, 所以继续和大家分享下网络编程的知识,在本专题中将和大家分享如何自己实现一个简单的FTP服务 ...

  3. How to do if the GM MDI cant connect with the software

    When you use GM MDI on your laptop , you may meet some troubles . Such as it cant communicate with t ...

  4. What Would you Find out about MS908CV ?

    The Autel MaxiSYS commercial car diagnostics scan device, No. MS908CV, performs increased technique ...

  5. 前端框架VUE----cli脚手架（框架）

    一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue # ...

  6. PKUWC2018 5/6

    总结: D1T1T2的思路较为好想,D1T3考试时估计是战略放弃的对象,D2T1思路容易卡在优化状态上(虽然明显3n的状态中有很多无用状态,从而想到子集最优,选择子集最优容易发现反例,从而考虑连带周边 ...

  7. DBeaver连接Oracle11g数据库

    DBeaver连接Oracle11g数据库 一.准备 (1)dbeaver管理软件 (2)远程连接数据库地址.用户名秘密等 (3)Oracle驱动:ojdbc6.jar工具包 下载地址:https:/ ...

  8. 利用cgi编程实现web版man手册

    董老师前几天给我们布置了3道作业,第三道作业是cgi程序设计. 题目: web服务器cgi接口功能的实现 要求: 能调用cgi程序并得到返回结果: cgi程序能接受参数并得到返回结果: 使用两种或以上 ...

  9. gdb远程debug A syntax error in expression, near `variable)'.

    今天调试有个linux环境的应用时,gdb提示A syntax error in expression, near `variable)'.,最后经查,gdb版本过低(比如7.2)或者源代码不匹配所致 ...

  10. 解决c1xx fatal error C1083 Cannot open source file

    在项目开发过程中,遇到一个问题,一个工程B导入另外一个工程A的生产代码,出现这个错误,最后查阅资料发现是文件路径太深,导致文件路径字符超过了217字符. 写了一个测试Demo来验证: 一.新建Win3 ...