简介
windex 是一个基于 Webpack 的开发服务器，它支持热加载和代理请求，并且可以与 Express、Koa 等框架集成。
安装
首先，需要安装 Node.js 和 npm。在终端中执行以下命令安装 windex：
npm install windex --save-dev
配置
在项目根目录下创建一个名为 windex.config.js 的文件，用于配置 windex。
entry
entry 属性用于指定 Webpack 的入口文件路径。
module.exports = {
entry: './src/index.js'
};port
port 属性用于指定 windex 服务器监听的端口号。
module.exports = {
port: 3000
};proxy
proxy 属性用于配置请求转发规则，用于在开发环境中解决跨域问题。
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- ------------------------
------------- -----
------------ -
-------- --
-
-
-
--这个配置表示，当请求以 /api 开头时，将请求代理到 http://localhost:8080 上，并且更改请求头中的 Host 为目标服务器的 Host。
plugins
plugins 属性用于配置 Webpack 插件。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};这个配置表示，使用 HtmlWebpackPlugin 插件来生成 HTML 文件。
module
module 属性用于配置 Webpack 的模块。
-- -------------------- ---- -------
-------------- - -
------- -
------ --
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
--这个配置表示，对于所有的 .js 文件，使用 babel-loader 加载，但是不包括 node_modules 目录下的文件。
resolve
resolve 属性用于配置模块解析规则。
module.exports = {
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': path.resolve(__dirname, 'src')
}
}
};这个配置表示，当导入模块时，先尝试通过 .js、.json 后缀来查找模块；同时，通过别名 @ 来指定 src 目录的路径。
使用
在终端中执行以下命令启动 windex：
npx windex
这个命令会自动查找项目根目录下的 windex.config.js，如果找到，则使用其中的配置启动 windex 服务器。
在开发环境中，可以使用 windex 提供的热加载功能进行快速开发。当修改源代码时，windex 会自动重新构建并刷新浏览器页面。
总结
windex 是一个基于 Webpack 的开发服务器，它能够帮助前端开发者简化开发流程，提高开发效率。需要注意的是，在生产环境中，应该使用 Webpack 打包生成静态文件，而不是依赖 windex。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3a8