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. java使用动态代理来实现AOP（日志记录）

    以下内容为原创,转载时请注明链接地址:http://www.cnblogs.com/tiantianbyconan/p/3336627.html AOP(面向方面)的思想,就是把项目共同的那部分功能分 ...

  2. sqlite之WAL模式

    链接 概述 在3.7.0以后,WAL(Write-Ahead Log)模式可以使用,是另一种实现事务原子性的方法. WAL的优点 在大多数情况下更快 并行性更高.因为读操作和写操作可以并行. 文件IO ...

  3. response设置输出文件编码

    在java后台的Action代码或者Servlet代码中用response的方法来设置输出内容的编码方式,有以下三个方法: 1.response.setCharacterEncoding(" ...

  4. mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)

    随着mysql的长期使用,可以修复表来优化,优化时减少磁盘占用空间.方便备份. REPAIR TABLE `table_name` 修复表 OPTIMIZE TABLE `table_name` 优化 ...

  5. 初识mvc分层思想

    首先要清楚的是: mvc是一种设计模式,一种分层思想,没有具体的技术与之对应,无论是js还是java或者其他的技术都可以运用. 既然是分层那么这些层都有哪些职责呢? View层(界面层): 为用户展示 ...

  6. Javascript刷新页面的几种方法

    Javascript刷新页面的几种方法: window.navigate(location)location.reload()location=locationlocation.assign(loca ...

  7. 说下查询动作 Pivot

    上一篇说了一下查询5步走~然后就几天_(:з」∠)_ ~今天继续说一下其中 表里面操作符里面的 Pivot ~ Pivot 在实现行转列的时候灰常有用.通常一个例子 ), ),LoginTime TI ...

  8. Linux服务器下nginx的安全配置

    1.一些常识 linux下,要读取一个文件,首先需要具有对文件所在文件夹的执行权限,然后需要对文件的读取权限. php文件的执行不需要文件的执行权限,只需要nginx和php-fpm运行账户的读取权限 ...

  9. iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案

    问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...

  10. 学会使用简单的 MySQL 常用操作

    一.MySQL 数据库的基本安装 # yum 安装 mysql 版本:5.1.73 [root@mysql ~]# yum install -y mysql-server mysql # 启动 MyS ...