webpack-dev-server 是生成在内存中的

本地开发：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

hello, webpack
<script type="text/javascript" src="http://127.0.0.1:8080/bundle.js"></script>

</body>
</html>

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080', // 资源服务器地址
        'webpack/hot/only-dev-server',
        './app/main.js'
    ],
    output: {
        publicPath:"http://127.0.0.1:8080/",
        path:'./',
        filename:'bundle.js'
    },
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        progress:true,
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE.ENV': 'development' //设置环境变量为开发环境
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

package.json{  "name": "webpack",

"version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
　　 "start": "webpack-dev-server --inline --hot"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

命令行执行：

webpack-dev-server --inline

webpack摸索（一）webpack-dev-server热模块替换的更多相关文章

  1. Webpack & The Hot Module Replacement热模块替换原理解析

    Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...

  2. Hot Module Replacement [热模块替换]

    安装了webpack-dev-server后 , 配置 "start": "webpack-dev-server" 然后运行 npm start 会开起一个we ...

  3. 前端技术之：webpack热模块替换（HMR）

    第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware   第二步:webpack配置中引入webpack对象     const we ...

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

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

  5. webpack摸索笔记

    上一个链接,入门webpack看这篇文章最好:https://segmentfault.com/a/1190000006178770 1.先安装好node 2.建个项目文件 3,.window+r,打 ...

  6. webpack中热模块更新

    Hot Module Replacement,热模块更新,很多时候会简写成HMR. "scripts": { "start": "webpack-de ...

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

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

  8. 笔记：配置 webpack dev server

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

  9. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

随机推荐

  1. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  2. 餐厅点餐系统app总结

    总结: 三个冲刺已经结束,虽然没有说十分完美,但该实现的功能还是实现了,只是在市场是相较于专业性的缺乏竞争力,从界面到体验都需进一步优化. 每个人的进度不一样,为了同一个任务需要不断的磨合与合作,但慢 ...

  3. Python for Infomatics 第13章 网页服务四（译）

    这几天因为其他事务,打断了自己的学习计划,今天继续我的翻译,避免又中途而废. 注:文章原文为Dr. Charles Severance 的 <Python for Informatics> ...

  4. js知识点

    在变量复制方面,基本类型和引用类型也有所不同,基本类型复制的是值本身,而引用类型复制的是地址. 循环引用 一个很简单的例子:一个DOM对象被一个Javascript对象引用,与此同时又引用同一个或其它 ...

  5. css制作对话框

    当你发现好多图都能用css画出来的时候,你就会觉得css很有魅力了.//我是这么觉得的,先不考虑什么兼容问题 像漫画里出现的对话框,往往都是一个对话框然后就加入一个箭头指向说话的那一方,来表示这个内容 ...

  6. 用ProxyFactoryBean创建AOP代理

    Spring的Advisor是Pointcut和Advice的配置器,它是将Advice注入程序中Pointcut位置的代码.org.springframework.aop.support.Defau ...

  7. 为什么commonjs不适合于浏览器端

    有了服务器端模块以后,很自然地,大家就想要客户端模块.而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行. 但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境.还是上 ...

  8. java学习中一些疑惑解答（2）

    (一)继承条件下构造方法的调用 以下面的源代码为例: package ktdemo; class Grandparent { public Grandparent() { System.out.pri ...

  9. siteserver cms选择栏目搜索无效

    标签必须以空格分开,且option 的value必须给id不能给名称

  10. Mysql的用户名密码设置方法

    方法如下: 1, 关闭mysql服务 /etc/init.d/mysqld stop 2,使用 –skip-grant-tables选项启动mysql服务,可以修 改/etc/inin.d/mysql ...