Webpack 开发服务器简介
webpack-dev-server 是 Webpack 官方支持的基于 CLI 的工具，用于为您的资产启动静态服务器。 虽然您 不需要任何 CLI 工具来使用 Webpack ，但 webpack-dev-server 为您提供了一个命令来启动具有内置实时重新加载功能的静态服务器。
设置
要运行 webpack-dev-server，除了 webpack-dev-server 之外，还需要安装 webpack 和 webpack-cli 。
npm install webpack@4.x webpack-cli@3.x webpack-dev-server@3.x假设你有一个 index.js使用 Axios 发出 HTTP 请求并将结果显示在 <h1>.
const axios = require('axios');
axios.get('http://httpbin.org/get?answer=42').
then(res => {
console.log(res.data.args.answer); // 42
document.getElementById('content').innerHTML = `<h1>${res.data.args.answer}</h1>`;
});这 index.html 文件将加载一个缩小版本的 index.js，index.min.js，该 Webpack 将构建。 下面是 index.html 文件。
<html>
<head>
<script type="text/javascript" src="/index.min.js"></script>
</head>
<body>
<div></div>
</body>
</html>对于此示例，您还需要一个文件： webpack.config.js它告诉 Webpack 如何编译你的项目。 下面 webpack.config.js 足以编译 index.js 成一个 index.min.js 包含 Axios 的包。
module.exports = {
mode: 'development',
entry: './index.js',
optimization: {
minimize: false
},
target: 'web',
output: {
path: __dirname,
filename: 'index.min.js'
}
};运行开发服务器
要运行 webpack-dev-server，请运行以下命令。
./node_modules/.bin/webpack-dev-server运行 webpack-dev-server 后，您应该会看到以下输出。
实时重新加载意味着您在 JavaScript 文件中所做的更改会传播到浏览器，而无需刷新页面。 例如，如果您将 'answer' 从 42 更改为 43 index.js，Webpack 自动重新编译 index.js 并且浏览器会自动重新加载，而您无需执行任何操作。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： Vue Watchers 简介和使用
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论