本文的路径配置主要涉及到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. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

  2. 13年总结js,css,java xml

    --------------------------------------javaScript知识点----------------------------- jQuery对象[Object obj ...

  3. 使用Ajax出现302 Moved Temporarily

    现象:在用ajax发送请求时,各种参数都对,地址也对,一直进error返回parse error. 使用浏览器发现ajax请求的header的响应码处:302 Moved Temporarily 百度 ...

  4. Python实现京东自动登录

    配置好webdriver,用的是Chrome的 import cv2 import time import numpy as np from selenium import webdriver fro ...

  5. kivy __init__() got an unexpected keyword argument '__no_builder' Kivy

    from kivy.lang.builder import Builder from kivy.app import App, runTouchApp from kivy.uix.boxlayout ...

  6. MySQL&MyBatis 时间处理的配合

    1:Mysql 时间类型 mysql数据库:时间类型 1)datetime datetime: "yyyy-mm-dd hh:mm:ss" datetime "1000- ...

  7. Java类型信息

    一.引言 最近在阅读<Java编程思想>,学习一下java类型信息,现在做一下总结.Java如何让我们在运行时识别对象和类的信息的.主要有两种方式:一种是传统的“RTTI”,它假定我们在编 ...

  8. mint-ui之tabbar使用

    <template> <div> <!-- tabcontainer --> <mt-tab-container class="page-tabba ...

  9. linux 安装二进制包程序一般步骤

    参考:https://blog.csdn.net/linzhiji/article/details/6774410 configure/make/make install的作用 这些都是典型的使用GN ...

  10. Codeforces 235C Cyclical Quest - 后缀自动机

    Some days ago, WJMZBMR learned how to answer the query "how many times does a string x occur in ...