在前端开发中，webpack 是一个非常常用的工具，它可以帮助我们打包静态资源，提高前端项目的开发效率和整体性能。而 webpack-dev-middleware 则是 webpack 中常用的中间件，可以在开发阶段使用 webpack 的能力，快速搭建本地开发服务器，提升开发效率。但是，在使用 webpack-dev-middleware 过程中会出现一些坑点，本文将详细讲解和指导解决问题。
webpack-dev-middleware 是什么
webpack-dev-middleware 是 webpack 中的一个插件，可以将 webpack 打包后的文件，以及文件变化实时编译的功能集成到 express 或者 Connect 创建的服务器上，可以在开发阶段快速搭建本地开发服务器。
开始使用 webpack-dev-middleware
安装
webpack、webpack-dev-middleware和express$ npm install webpack webpack-dev-middleware express
创建一个简单的 webpack 配置文件
webpack.config.js，用于打包输出编译后的文件。module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' } };创建一个
express程序，用于启动服务器，并将 webpack-dev-middleware 配置为中间件。-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- ------------- - ------------------------------- ----- -------------------- - ---------------------------------- ----- --- - ---------- ----- -------- - ----------------------- -------------------------------------- - ----------- ------------------------------- ---- ---------------- -------- -- - -------------------- --- --------- -- ---- ---------- ---
运行
node server.js，通过浏览器访问http://localhost:3000，就可以看到 webpack-dev-middleware 编译后的结果。
webpack-dev-middleware 的坑点
1. 编译后的资源路径不正确
在模板中使用 <link> 或者 <script> 标签引入编译后的资源时，可能会出现路径不正确的问题。这是由于 webpack-dev-middleware 的文件输出路径不是根目录，而是以 /__webpack_dev_server__ 为前缀的虚拟路径。
解决办法：
可以通过设置 publicPath，将路径添加到编译后的资源路径上。
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath
}));2. 热加载（Hot Module Replacement）不生效
热加载可以帮助我们在不刷新页面的情况下，及时更新页面的内容。但是在使用 webpack-dev-middleware 时可能会发现热加载不生效。
解决办法：
需要添加 webpack-hot-middleware 中间件并手动开启热加载。
const webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log
}));同时，在 webpack.config.js 中添加 HotModuleReplacementPlugin 插件。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
--------------------------------
----------------
--
------- -
--------- ------------
----- --------- - --------
----------- ---
--
-------- -
--- -------------------------------------
--
------- -
------ -
-
----- --------
-------- ----------------------- -------
---- ----------------
-
-
-
--3. Windows 环境下编译失败
单独使用 webpack-dev-middleware 进行编译时，可能会出现编译过程中偶尔出现的 “EMFILE: too many open files” 错误。这是由于 Windows 下文件句柄数量限制较小所致。
解决办法：
在 Windows 下，可以通过一些手段提高可打开文件数的数量。
通过命令临时设置客户端限制
$ ulimit -n 1024 $ webpack-dev-server ...
通过注册表永久设置限制（需要重启系统）
查找 Windows 注册表项
HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Control/FileSystem，双击 NtfsDisable8dot3NameCreation，然后将值从 0 改为 1，保存即可。
总结
使用 webpack-dev-middleware 只需要几步就可以搭建简单的本地服务器，方便前端开发的实时编译和热加载。不过，在使用过程中需要注意一些坑点，比如正确配置 publicPath，手动开启热加载，并在 Windows 系统中提高文件句柄数量。通过本文介绍的方法解决这些问题，相信能够更加高效地使用 webpack-dev-middleware。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd9d0d95b1f8cacdce9ced