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. lamp

      Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立 的程序,但是因为常被放在一起使用,拥有了越来越高的 ...

  2. 关于handler 和 looper 的问题

    重新去学习回顾looper和handler ,还是需要重新认识这个经常使用的机制. 我首先是看任玉刚老师的书<android的开发艺术探索>的第十章. 里面一句话开始说出了我们大概的理解— ...

  3. phoneGap蓝牙设备链接打印操作插件

    前台 bluetooth.js /*Copyright 2013  101.key Licensed under the Apache License, Version 2.0 (the " ...

  4. C#遍历DataSet中数据的几种方法总结

    //多表多行多列的情况foreach (DataTable dt in YourDataset.Tables) //遍历所有的datatable{foreach (DataRow dr in dt.R ...

  5. iOS中 将 颜色转化成图片

    定义一个类方法: 声明: + (UIImage *)imageFromColor:(UIColor *)color; 实现: + (UIImage *)imageFromColor:(UIColor ...

  6. mac和virtualbox虚拟机共享

    virtualbox安装增强工具 打开虚拟机,devices—shared folders—settings 打开窗口,选择“共享文件夹”,点击“带加号的文件夹图标”, 点击文件夹路径,选择其它,然后 ...

  7. HTML5

    一.头部设置 <!--页面窗口自动调整到设备宽度,并禁止用户及缩放页面--> <meta name="viewport" content="width= ...

  8. 关于 Raphael

    Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch,以及SVG.VML处理库Ra ...

  9. vue-cli 路由 实现类似tab切换效果（vue 2.0）

    1,更改main.js 2,在App.vue中,写入两个跳转链接(router-link),分别跳转到"home""About" (home.About即分别是 ...

  10. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...