概念

webpack-dev-middleware 是一个容器(wrapper), 它可以把 webpack 处理后的文件传递给一个服务器(server). webpack-dev-server 在内部使用了它, 同时, 它也可以作为一个单独的包来使用, 以便进行更多自定义设置来实现更多的需求.

特点

• 它将打包后的文件直接写入内存.
• 每次请求都将获得最新的打包结果.
• 在监视模式(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 = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
    //输出的文件名 合并以后的js会命名为bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js',//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
  +     publicPath: '/' //publicPath 也会在服务器脚本用到，以确保文件资源能够在 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"),// 设置静态访问文件路径
            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)
})

Path和PublicPath

publicPath

1. 不设值, 那么资源文件会从相对的根目录加载, 是html文件的同级, 网页的话则是/
2. 通过file://打开网页, 是通过绝对根目录/往下寻找路径
3. 通过http(s)://打开网页, 是通过网页的/往下寻找路径
4. 值是http(s)://这样的URL路径, 会直接去该路径下加载文件
   (主要用作模拟CDN访问资源)
5. webpack-dev-middleware 配置项里的 publicPath 要与 webpack.config 里的 output.publicPath 保持一致（并且只能是相对路径），不然会出现问题；
6. 使用 webpack-dev-middleware 的时候，其实可以完全无视 webpack.config 里的 output.path，甚至不写也可以，因为走的纯内存，output.publicPath 才是实际的 controller；
7. publicPath 配置的相对路径，实际是相对于 html 文件的访问路径。

path

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

官方文档

webpack-dev-middleware