webpack-dev-server插件可以实现webpack的自动编译刷新

项目结构

pockage.js

{

  "name": "webpack",

  "version": "1.0.0",

  "description": "测试webpack",

  "main": "index.js",

  "scripts": {

    "build": "webpack",

    "dev": "webpack-dev-server --inline --config webpack.config.js"

  },

  "author": "zouqin",

  "license": "ISC",

  "devDependencies": {

    "css-loader": "^0.21.0",

    "style-loader": "^0.13.0",

    "webpack": "^1.12.2",

    "webpack-dev-server": "^1.16.2"

  }

}

　　

webpack.config.js

var path = require("path");

module.exports = {

  entry: {

    app: ['./app/main.js']

  },

  output: {

    path: path.resolve('./', "build"),

    publicPath: "build",

    filename: "bundle.js"

  }

};

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="build/bundle.js"></script>

    </head>

    <body>

        <h1>测试！测试！测试！测试！测试！测试！</h1>

    </body>

</html>

webpack webpack-dev-server使用指南的更多相关文章

  1. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

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

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

  3. 笔记：配置 webpack dev server

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

  4. [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 ...

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

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

  6. webpack构建工具快速上手指南

    最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...

  7. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

  8. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  9. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  10. webpack run dev后并没有生成dist目录，但是浏览器里却读取了dist里的build.js？

    最近想看看现在做的React项目用的脚手架,看了下webpack的配置,尝试修改一些东西看看输出结果,结果允许npm run dev发现没有输出目录,怎么回事呢.又安装了vue官方提供的webpack ...

随机推荐

  1. webbench 压力测试

    原文 webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好用,安装使用也特别方便,并且非常小. 主要是 -t 参数用着比较爽,下面参考了张宴 ...

  2. 2015年Java开发岗位面试题归类

    一.Java基础 1. String类为什么是final的. 2. HashMap的源码,实现原理,底层结构. 3. 说说你知道的几个Java集合类:list.set.queue.map实现类咯... ...

  3. Java中的static的使用

    Java中的static使用之静态变量 神话丿小王子的博客主页 1.Java 中被static修饰的成员称为静态成员或类成员.它属于整个类所有,而不是某个对象所有,即被类的所有对象所共享.且优先于对象 ...

  4. 1、开篇：PMO定义 - PMO项目管理办公室

    PMO,Project Management Office,项目管理办公室,笔者不按照项目管理知识体系指南PMBOK(Project Management Body Of Knowledge)上的定义 ...

  5. 数据库 DROP命令和DELETE命令的本质区别是什么

    不同点: 1. 从删除内容上区分: truncate和 delete只删除数据不删除表的结构(定义) drop语句将删除表的结构.被依赖的约束(constrain),触发器(trigger),索引(i ...

  6. Hello BIEE

      这篇文章提供了一个Hello World式的例子,讲述如何创建一个最简单的BIEE资料库.本文使用的示例数据可以在从此链接下载:http://www.zw1840.com . 目录 创建资料库 创 ...

  7. Tomcat 目录详解

     一.文字版本: bin: 该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是 ...

  8. (转)Java 详解 JVM 工作原理和流程

    作为一名Java使用者,掌握JVM的体系结构也是必须的.说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java虚 ...

  9. x01.BitmapHelper：图像处理

    “所有致我于死地的,也激发我胆魄”,姚贝娜的<心火>,是我近年来听过最好的歌,特此推荐一下. 图像处理,大概分三步:1.LockBits():2.进行处理:3.UnlockBits():这 ...

  10. C# .NET 动态调用webservice的三种方式

    转载自 百度文库 http://wenku.baidu.com/link?url=Q2q50wohf5W6UX44zqotXFEe_XOMaib4UtI3BigaNwipOHKNETloMF4ax4W ...