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

使用方法

1、文件目錄

2、安裝

webpack, webpack-dev-middleware, style-loader, css-loader

3、文件內容

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