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. 【转载】安卓APP架构

    注:本篇博文转载于 http://my.oschina.net/mengshuai/blog/541314?fromerr=z8tDxWUH 本文介绍了文章作者从事了几年android应用的开发,经历 ...

  2. Mac电脑清理硬盘"其他"

    作为一个MacBook的使用者,无不感受到苹果对于系统和硬件的完美匹配. 苹果电脑不适合玩游戏,所以我只用它开发iOS使用.电脑里除了Xcode和常用办公软件与通讯软件以外,我没有装其他的任何大应用. ...

  3. android deep link(深度链接)与自定义协议！

    此自定义仅供参考! 首先打开androidManifest.xml 在MainActivity中添加如下内容: <activity android:name=".MainActivit ...

  4. 【代码笔记】iOS-离线地图

    一,效果图. 二,工程图. 三,代码. ViewController.h #import <UIKit/UIKit.h> #import <CoreLocation/CoreLoca ...

  5. 【代码笔记】iOS-钢琴小游戏

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> //加入头文件 #import <AudioTool ...

  6. 【代码笔记】iOS-短信分享

    代码: ViewController.h #import <UIKit/UIKit.h> //短信分享 #import <MessageUI/MFMailComposeViewCon ...

  7. forward内部跳转 和redirect重定向跳转的区别

    1.从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以它的地 ...

  8. php示例代码之使用mysqli对象

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. Java类型擦除机制

    Java泛型是JDK 5引入的一个特性,它允许我们定义类和接口的时候使用参数类型,泛型在集合框架中被广泛使用.类型擦除是泛型中最让人困惑的部分,本篇文章将阐明什么是类型擦除,以及如何使用它. 一个常见 ...

  10. char(10)和VARCHAR(10)主要的区别是什么？

    区别: 1．CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 如: 存储字符串“abc", 对于CHAR (10),表示你存储的字符将占10个字节(包括7个空字符), 而同样的 ...