我们在使用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

  1. import index from '../css/index.css';
  2. var sub = require('./sub');
  3. var app = document.createElement('div');
  4. app.innerHTML = '<h1>Hello World h1</h1>';
  5. app.appen

2.sub.js

  1. function generateText() {
  2.   var element = document.createElement('h2');
  3. element.id = "twoH"
  4.   element.innerHTML = "Hello h2 world h2";
  5.   return element;
  6. }
  7. module.exports = generateText;

3.index.css

  1. #twoH{
  2. color:blue;
  3. font-size:26px;
  4. }

4.webpack.config.js

  1. const path = require('path');
  2. const HtmlwebpackPlugin = require('html-webpack-plugin');
  3. const webpack = require('webpack');
  4. //定义了一些文件夹的路径
  5. const ROOT_PATH = path.resolve(__dirname);
  6. const APP_PATH = path.resolve(ROOT_PATH, 'app');
  7. const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
  8. module.exports = {
  9. //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  10. entry: APP_PATH,
  11. //输出的文件名 合并以后的js会命名为bundle.js
  12. output: {
  13. path: BUILD_PATH,
  14. filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
  15. },
  16. module: {
  17. rules: [
  18. {
  19. test: /\.css$/,
  20. use: ['style-loader','css-loader']
  21. },
  22. ]
  23. },
  24. //添加我们的插件 会自动生成一个html文件
  25. plugins: [
  26. new HtmlwebpackPlugin({
  27. title: 'Hello World app'
  28. }),//在build目录下自动生成index.html,指定其title
  29. ],
  30. };

5.server.js

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

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

  1. "scripts": {
  2. "start": "node server.js"
  3. },

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

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

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

webpack-hot-middleware 插件

webpack-dev-middleware的其它配置项

  1. app.use(webpackDevMiddleware(webpack, {
  2. //这里options的一些配置见下表
  3. }))

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

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

更加高级的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. python django 基本测试 及调试

    #########20181110from django.db import modelsfrom blog.models import Article, Author, TagAuthor.obje ...

  2. REQUIRED与REQUIRED_NEW

    出处: https://blog.csdn.net/selfsojourner/article/details/74561745 spring 事务的传播行为中,有两个容易混淆的行为:REQUIRED ...

  3. requirej入门(二)

    requirejs中的一些基本知识,包括API使用方式等. 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs, ...

  4. Unity 物体旋转会发生变形

    当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.

  5. Murano Application

    OpenStack Application Link: http://apps.openstack.org/ Those applications include Murano packages, H ...

  6. java多线程通过管道流实现不同线程之间的通信

    java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...

  7. 2019.3.26判断是否回文(java实现)

    我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...

  8. 如何使用JWT来实现单点登录功能

    我们平时自己开发项目,分布式的结构时,访问量不大,但是又不想搭建redis服务器,这时我觉得jwt不错. 个人理解,jwt就是类似于一把锁和钥匙,客户来租房(登录),我们需要给他进来(第一次登录)登记 ...

  9. Windows之CMD查看系统信息

    Windows 系统通过命令行(CMD)查询系统信息有两种方式: 1.图形化界面: 在“运行”中键入CMD,然后输入 dxdiag,回车后弹出图形化界面 ------ DirectX 诊断工具. 2. ...

  10. Wallet address

    BCX XZVYYwXFAJwv6x4KTssQxJb4EReVdCBnpb BCD 1DNSFUD7LURZdmbckkQcxMvinNJ26mVcNH