概念

webpack-dev-middleware 是一個容器(wrapper), 它可以把 webpack 處理后的文件傳遞給一個服務(wù)器(server). webpack-dev-server 在內(nèi)部使用了它, 同時, 它也可以作為一個單獨的包來使用, 以便進(jìn)行更多自定義設(shè)置來實現(xiàn)更多的需求.

特點

• 它將打包后的文件直接寫入內(nèi)存.
• 每次請求都將獲得最新的打包結(jié)果.
• 在監(jiān)視模式(watch mode)下如果代碼變化婿禽，middleware 會馬上停止提供舊版的 bundle 并且會延遲請求直到編譯完成.

webpack-dev-server(使用webpack-dev-middleware)

The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle.

實例

• 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 = {
    //項目的文件夾 可以直接用文件夾名稱 默認(rèn)會找index.js 也可以確定是哪個文件名字
    entry: APP_PATH,
    //輸出的文件名 合并以后的js會命名為bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js',//將app文件夾中的兩個js文件合并成build目錄下的bundle.js文件
  +     publicPath: '/' //publicPath 也會在服務(wù)器腳本用到付燥，以確保文件資源能夠在 http://localhost:3000 下正確訪問
    },
    module: {
        rules: [
          { 
            test: /\.css$/, 
            use: ['style-loader','css-loader']
          },
        ]
    },
    //添加我們的插件 會自動生成一個html文件
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello World app'
        }),//在build目錄下自動生成index.html稻薇，指定其title
    ],

};

• 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"),// 設(shè)置靜態(tài)訪問文件路徑
            PORT = 9090, // 設(shè)置啟動端口
            complier = webpack(webpackConfig) 

app.use(webpackDevMiddleware(complier, {
    // 這里是對 webpackDevMiddleware 的一些配置，具體其他配置我們下面已經(jīng)列出來了瑰排。

    //綁定中間件的公共路徑,與webpack配置的路徑相同
    publicPath: webpackConfig.output.publicPath,
    quiet: true  //向控制臺顯示任何內(nèi)容 
}))


// 這個方法和下邊注釋的方法作用一樣，就是設(shè)置訪問靜態(tài)文件的路徑
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)
})

Path和PublicPath

publicPath

1. 不設(shè)值, 那么資源文件會從相對的根目錄加載, 是html文件的同級, 網(wǎng)頁的話則是/
2. 通過file://打開網(wǎng)頁, 是通過絕對根目錄/往下尋找路徑
3. 通過http(s)://打開網(wǎng)頁, 是通過網(wǎng)頁的/往下尋找路徑
4. 值是http(s)://這樣的URL路徑, 會直接去該路徑下加載文件
   (主要用作模擬CDN訪問資源)
5. webpack-dev-middleware 配置項里的 publicPath 要與 webpack.config 里的 output.publicPath 保持一致（并且只能是相對路徑），不然會出現(xiàn)問題料仗；
6. 使用 webpack-dev-middleware 的時候，其實可以完全無視 webpack.config 里的 output.path伏蚊，甚至不寫也可以立轧，因為走的純內(nèi)存，output.publicPath 才是實際的 controller躏吊；
7. publicPath 配置的相對路徑氛改，實際是相對于 html 文件的訪問路徑。

path

就是webpack打包的指定物理存儲地址, bundle.js的存放位置.

官方文檔

webpack-dev-middleware