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. 建立jackrabbit内容仓库实例

    jackrabbit需要内容仓库主目录和内容仓库配置文件这两部分的信息才能创建一个运行时内容仓库实例. 1.内容仓库主目录结构 2.Repository.xml的配置文件结构

  2. 本地xdebug调试搭建 Laravel+homestead+phpstorm

    1.在homestead virtual box安装和配置xdebug 先在终端运行vagrant up 和 vagrant ssh,ssh远程到homestead,然后复制以下代码到一个shell文 ...

  3. 【原】iOS学习之tableView的常见BUG

    1.TableView头视图不随视图移动,头视图出现错位 错误原因:tableView的 UITableViewStyle 没有明确的声明 解决方法:在tableView声明的时候明确为 UITabl ...

  4. MAC帧和IP数据报

  5. 案例1.通过Jquery来处理复选框

    实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...

  6. 一个简便的方法，获取某个页面元素的Xpath值

    今天了解到一个比较方便获取页面元素Xpath的方法,以下是获取步骤. 1:使用chrome浏览器打开百度:http://www.baidu.com 2:点击邮件,检查. 3:定位到某个页面的元素:点击 ...

  7. java发送邮件..转

    使用Java应用程序发送E-mail十分简单,但是首先你应该在你的机器上安装JavaMail API 和Java Activation Framework (JAF) . 你可以在 JavaMail ...

  8. java-如何用eclipse打包jar

    Eclipse通过导出的方式(右键单击项目,之后选择Export)打包java类文件生成jar包. 方法一:(在项目工程没有引用外部jar包时,直接导出) 选中工程---->右键,Export. ...

  9. CentOS 安装 gcc-c++

    由于网络环境的问题,很难在线安装,可以 直接挂载安装盘文件,然后在Pacakage 中进行本地安装

  10. Struts 2的数据校验

    既然说到了Struts 2的数据校验,我们该怎么去实现呢?又是通过什么来实现呢? 就让我带着大家一起来走进Struts 2的数据校验吧. 首先我们会想到在Stuts 2的登录案例中我们定义了一个Act ...