本文的路径配置主要涉及到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. 在MyEclipse中使用javadocAPI文档

    开始啦 1.打开MyEclipse,选中要导出的项目,右击Exprot弹出窗口,选择java----javadoc点击next到下一界面. 2.选出要导出的项目或要添加的项目,在browse中选择路径 ...

  2. ==和equasl、hashmap原理（***）

    public class String01 { public static void main(String[] args) { String a="test"; String b ...

  3. Eloquent JavaScript #02# program_structure

    第一章中作者介绍了各种值,但是这些独立的值是没有意义的,只有当值放在更大的框架的时候才会彰显它们的价值.所以第二章开始介绍程序结构. 1.var VS. let 以及 const 作者推荐用 let ...

  4. 在idea中不出现大波浪的设置

    在idea中如果有重复代码时候,就会出现大波浪 ,然后,现在可以设置  Duplicated Code 的对号去掉就可以没有大波浪

  5. linux下nginx编译安装

    步骤: 1.获取nginx安装包. 进入nginx官网:http://nginx.org/ 找到稳定版本: 点击红框内的链接. 使用wget获取安装包. wget http://nginx.org/d ...

  6. python通过sftp远程传输文件

    python提供了一个第三方模块paramiko,通过这个模块可以实现两台机器之间的网络连接,sftp是paramiko的一个方法,使用sftp可以在两台机器之间互相传输 拷贝文件.然而paramik ...

  7. Spring是如何处理注解的

    如果你看到了注解,那么一定有什么代码在什么地方处理了它. Alan Hohn 我教Java课程时强调的一点是注解是惰性的.换句话说,它们只是标记,可能具有某些属性,但没有自己的行为.因此,每当你在一段 ...

  8. 零基础Python爬虫实现(爬取最新电影排行)

    提示:本学习来自Ehco前辈的文章, 经过实现得出的笔记. 目标网站 http://dianying.2345.com/top/ 网站结构 要爬的部分,在ul标签下(包括li标签), 大致来说迭代li ...

  9. IO流-基础

    //创建输出流对象 FileWriter fw = new FileWriter("d:\\a.txt"); /* * 创建输出流对象做了哪些事情: * A:调用系统资源创建了一个 ...

  10. 尚硅谷面试第一季-11MyBatis中当实体类中的属性名和表中的字段名不一样怎么办

    问题: MyBatis中当实体类中的属性名和表中的字段名不一样 ,怎么办 ? 解决方案: 1.写sql语句时起别名 <!-- id属性:必须是接口中方法的方法名 resultType属性:必须是 ...