webpack-dev-middleware 插件的使用

该文章以收录 《webpack探索之路》

前言

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

这里怎么安装我不在说，

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

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

使用方法

一、文件目录

二、安装

webpack, webpack-dev-middleware, style-loader, css-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.js、sub.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