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. Servlet基础（二） Servlet的生命周期

    Servlet基础(二) Servlet的生命周期 Servlet的生命周期可以分为三个阶段: 1.初始化阶段 2.响应客户请求阶段 3.终止阶段 Servlet的初始化阶段 在下列时刻Servlet ...

  2. subversion SVN

    subversion(简称svn)是近年来崛起的版本管理软件系统,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. Subversion是一个版本控制系统,相对于的RCS.C ...

  3. App Today Extension开发注意事项

    从iOS 8起,就有了App Extension.Extension的种类至今也扩充到了19种,应用也很广泛,值得重点关注起来. Extension几乎可以看做一个内嵌的独立App,拥有独立的Bund ...

  4. Android四大组件之Activity一（组件的概念、Intent、监听）

    前言知识补充:  什么是组件?   1.它的类必须实现特定接口或继承特定类   2.需要在配置文件中配置其全类名   3.它的对象不是通过new来创建的, 而是系统自动创建的   4.它的对象具有一定 ...

  5. json对象转为字符串，当做参数传递时加密解密

    [son对象  字符串 互相转行] 比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":"tom","sex ...

  6. BIEE使用技巧

    索引: 1.如何清除缓存 2.通过“编辑 SQL”取得前一天的日期 3.格式化日历框参数 4.根据传入的开始时间和结束时间取得事实表中的指标(用到了3中的技巧) 5.直接调用数据库函数 6.时间格式转 ...

  7. Puppet权威指南

    <Puppet权威指南>基本信息作者: 王冬生 丛书名: Linux/Unix技术丛书出版社:机械工业出版社ISBN:9787111485988上架时间:2014-12-25出版日期:20 ...

  8. SQL Server（一）——数据库基础知识

    SQL:Structured Quety Language SQL SERVER是一个以客户/服务器(c/s)模式访问.使用Transact-SQL语言的关系型数据库管理子系统(RDBMS) DBMS ...

  9. Mysql字符集知识总结

    字符集&字符编码方式 字符集(Character set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,这里的字符可以是英文字符,汉字字符,或者其他国家语言字符. 常见字符集 ...

  10. mysql执行计划

         烂sql不仅直接影响sql的响应时间,更影响db的性能,导致其它正常的sql响应时间变长.如何写好sql,学会看执行计划至关重要.下面我简单讲讲mysql的执行计划,只列出了一些常见的情况, ...