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. # git 操作拾遗

    如何删除本地库 find . -name ".git" | xargs rm -Rf fatal: refusing to merge unrelated histories gi ...

  2. 关于handler 和 looper 的问题

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

  3. [field:picname/]和[field:litpic/]区别

    显示出二级栏目及以下的所有图片(包含三级栏目的) <ul class="incps"> {dede:arclist row=9 col="3" ty ...

  4. 自定义 TableViewCell 的分割线

    刚开始自定义 tableViewCell 的时候,用的是直接在 cell 上加一张 imageView 的方法,如果在点击 cell 的时候有页面的跳转,这样做没什么问题,但是,如果在点击 cell ...

  5. 使用Dotfuscator 进行.Net代码混淆 代码加密的方法

    混淆代码能在一定程度上放置代码被盗用,保护我们的知识产权 1.打开vs2012,选择工具-〉Dotfuscator Software Services 2.选择你需要混淆的DLL 文件,可以多选择 3 ...

  6. PHP基础知识之字符串运算符

    两个字符串相加用 . 运算符(类似于+),如$a="str1" . "str2";$b=$a . "str3";=>"str ...

  7. gitlab使用有感之坚持

    当老师请大二的学弟教我们使用这个软件的时候, 当时就吓坏我了,感觉好高大上的样子,全英文的,还有什么阿里云的服务器用来代码管理:心情一下子就不好了,感觉自己懂得东西好少啊,比学弟懂得都少,跟不上时代的 ...

  8. 关于shiro

    1.1  简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...

  9. sql SYS对象集合

    select * from SYS.objects select * from SYS.all_objects select * from SYS.tables select * from SYS.c ...

  10. datatables服务器端分页要点

    背景:当要查询大量数据的时候,有datatables自身的分页,明显查询比较慢,这是要使用服务器端分页 参数:"bServerSide": true, "fnServer ...