我们在使用webpack 编译文件时,每次改动文件都要去重新编译,是不是很麻烦,这时候我们就用到了webpack-dev-middleware 插件,该插件对更改的文件进行监控,编译, 一般和 webpack-hot-middleware 配合使用,实现热加载功能

这里怎么安装我不在说,

github地址:
https://github.com/webpack/webpack-dev-middleware

练习代码地址: (webpackDevMiddleware 文件夹,下载执行命令即可)
https://github.com/webxiaoma/webpack-domes

使用方法

一、文件目录

二、安装

webpackwebpack-dev-middlewarestyle-loadercss-loader

三、文件内容

1.index.js

import index from '../css/index.css';

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World h1</h1>';
app.appen

2.sub.js

function generateText() {
  var element = document.createElement('h2');
element.id = "twoH"
  element.innerHTML = "Hello h2 world h2";
  return element;
}
module.exports = generateText;

3.index.css

#twoH{
color:blue;
font-size:26px;
}

4.webpack.config.js

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //定义了一些文件夹的路径
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
]
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
}),//在build目录下自动生成index.html,指定其title
], };

5.server.js

const path = require("path")
const express = require("express")
const webpack = require("webpack") const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackConfig = require('./webpack.config.js') const app = express(),
DIST_DIR = path.join(__dirname, "dist"),// 设置静态访问文件路径
PORT = 9090, // 设置启动端口
complier = webpack(webpackConfig) app.use(webpackDevMiddleware(complier, {
// 这里是对 webpackDevMiddleware 的一些配置,具体其他配置我们下面已经列出来了。 //绑定中间件的公共路径,与webpack配置的路径相同
publicPath: webpackConfig.output.publicPath,
quiet: true //向控制台显示任何内容
})) // 这个方法和下边注释的方法作用一样,就是设置访问静态文件的路径
app.use(express.static(DIST_DIR)) // app.get("*", (req, res, next) =>{
// const filename = path.join(DIST_DIR, 'index.html'); // complier.outputFileSystem.readFile(filename, (err, result) =>{
// if(err){
// return(next(err))
// }
// res.set('content-type', 'text/html')
// res.send(result)
// res.end()
// })
// }) app.listen(PORT,function(){
console.log("成功启动:localhost:"+ PORT)
})

文件都写好了我们,可以直接执行 node server,我们也可以在 package.json中制定命令

 "scripts": {
"start": "node server.js"
},

然后运行npm start,之后我们会在命令行中看到,

然后我们打开 http://localhost:9090

当我我们修改index.jssub.js、 index.css 中的内容时,webpack会自动给我们编译文件,我们刷新浏览器就可以看到,编译后的文件。编编译的文件是放在内存中的,我们的实际文件中并不会看到,到这里,我们肯会想,如果我们保存之后,文件被编译好,浏览器自动刷新多好,这时我们就用到了 webpack-hot-middleware 插件,这个功能的实现请访问文章

webpack-hot-middleware 插件

webpack-dev-middleware的其它配置项

app.use(webpackDevMiddleware(webpack, {

    //这里options的一些配置见下表
}))

options: (这里只有publicPath 是必需的,而所有其他选项都是可选的 )

noInfo: false,
// 显示无信息到控制台(仅警告和错误) quiet: false,
// 向控制台显示任何内容 lazy: true,
// 切换到延迟模式
// 这意味着没有观看,而是重新编译每个请求 watchOptions: {
aggregateTimeout: 300,
poll: true
},
// watch options (only lazy: false) publicPath: "/assets/",
// 绑定中间件的公共路径
// 使用与webpack相同 index: "index.html",
// Web服务器的索引路径,默认为“index.html”。
// 如果falsy(但不是未定义),服务器将不会响应到根URL的请求。 headers: { "X-Custom-Header": "yes" },
// 自定义标题 mimeTypes: { "text/html": [ "phtml" ] },
// 添加自定义mime /扩展映射
// https://github.com/broofa/node-mime#mimedefine
// https://github.com/webpack/webpack-dev-middleware/pull/150 stats: {
colors: true
},
// 用于形成统计信息的选项 reporter: null,
// 提供自定义记录器来更改日志显示的方式。 serverSideRender: false,
// 关闭服务器端渲染模式。有关详细信息,请参阅服务器端渲染部分。

更加高级的API请访问:

https://github.com/webpack/webpack-dev-middleware

转载:https://segmentfault.com/a/1190000011761306

webpack-dev-middleware插件的使用的更多相关文章

  1. webpack常用的插件安装命令

    webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...

  2. vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js

    系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...

  3. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  4. webpack.dev.conf.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...

  5. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  6. vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...

  7. npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1

    internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...

  8. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  10. webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

    vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...

随机推荐

  1. JavaSE---关键字---return,break,continue

    1.[break] 1.1 默认   用来结束   整个循环: package com.exiuge.mytest; public class BreakTest { public static vo ...

  2. MVC 路由检测组件 Routing Debugger

    组件下载地址 haacked.com 1.在mvc项目中引入组件 2.配置route规则 public static void RegisterRoutes(RouteCollection route ...

  3. UGUI RectTransform 矩形变换

    UGUI游戏对象基本都有这个组件. float radius; radius = GetComponent<RectTransform>().sizeDelta.x; radius = ( ...

  4. Sqlite操作的一些关键类的官方说明与Intent的startactivityforresult方法

    Intent: 该功能可以用于通过intent来跳转界面时候传递信号给原理的页面,以便做出一些处理: sqlite的使用: 该方法得到的sqlitedatabase可读可写,而getreadabled ...

  5. MATLAB矩阵操作和算术运算符

    矩阵的表示 矩阵之间用空格或者是逗号间隔 矩阵可以拼接(可以用矩阵拼接) 实部矩阵和虚部矩阵构成复数矩阵,一一对应. 冒号表达式: 格式: e1:e2:e3 e1表示初始值    e2表示步长   e ...

  6. 基于vue-cli 将webpack3 升级到 webpack4 配置

       升级webpack4前 先删除之前的webpack, babel-loader  下载 webpack npm i -D webpack@4 webpack-cli@3 webpack-dev- ...

  7. Python常用模块(三)

    一.shelve模块 shelve也是一种序列化方式,在python中shelve模块提供了基本的存储操作,shelve中的open函数在调用的事和返回一个shelf对象,通过该对象可以存储内容,即像 ...

  8. [持续更新] Linux基础的重要命令

    命令总结:100个左右 mkdir 方法一 [root@localhost ~]# mkdir /test && ls -ld /test 方法二 [root@localhost ~] ...

  9. Oracle的oci.dll加载错误解决办法

    开始 -> 程序 -> Oracle -> Configuration and Migration Tools -> Net Manager→本地→概要文件→Oracle高级安 ...

  10. 【工作】Proxy Server的优化 - 检测目标网站URL变化

    在工作中,我在组里负责一个Proxy(代理)的Module,这个Module是针对微软的Office 365的邮件门户OWA实现,工作起来后,用户访问Office 365 OWA,无需再输入Offic ...