Webpack部署本地服务器的方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">Webpack部署本地服务器</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">目的</a></li><ul class="third_class_ul"><li><a href="#_label3_0_0_0">什么是 HMR</a></li><li><a href="#_label3_0_0_1">HMR 通过如下几种方式, 来提高开发的速度</a></li><li><a href="#_label3_0_0_2">如何使用 HMR</a></li><li><a href="#_label3_0_0_3">host 配置</a></li></ul></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>Webpack部署本地服务器</h2><p class="maodian"><a name="_lab2_0_0"></a></p><h3>目的</h3>
<blockquote><p>完成自动编译<br /><strong>常用方式</strong>: webpack-dev-server</p></blockquote>
<p><code>webpack-dev-server</code> 是一个用于开发环境的 Web 服务器，它集成了 Webpack，并提供了实时重新加载和热替换等功能。以下是一个简单的 <code>webpack-dev-server</code> 配置和使用示例：</p>
<p>1.首先，确保已经安装了 <code>webpack</code>, <code>webpack-cli</code> 和 <code>webpack-dev-server</code>。如果没有安装，可以使用以下命令进行安装：</p>
<div class="jb51code"><pre class="brush:bash;">npm install --save-dev webpack webpack-cli webpack-dev-server -D // 开发环境</pre></div>
<p>2.在项目根目录下创建一个名为 <code>webpack.config.js</code> 的文件，用于存放 Webpack 配置信息：</p>
<div class="jb51code"><pre class="brush:js;">const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
// 是否为静态文件开启 gzip compression 默认是false
compress: true,
port: 9000,
// open 是否打开浏览器, 默认是 false
open: true,
hot: true,
},
};</pre></div>
<p>这个配置文件定义了入口文件为 <code>src/index.js</code>，输出文件为 <code>dist/main.js</code>，并配置了 <code>webpack-dev-server</code> 的相关参数。</p>
<p>3.在项目的 <code>package.json</code> 文件中添加一个启动脚本：</p>
<div class="jb51code"><pre class="brush:json;">{
"scripts": {
"serve": "webpack serve"
}
}</pre></div>
<p>现在，可以通过运行 <code>npm run serve</code> 命令来启动 <code>webpack-dev-server</code>。服务器将在端口 9000 上启动，并在默认浏览器中打开 <code>http://localhost:9000</code>。当你对 <code>src/index.js</code> 文件进行更改时，服务器将自动重新加载和热替换。 认识模块热替换（HMR）</p>
<p class="maodian"><a name="_label3_0_0_0"></a></p><h4>什么是 HMR</h4>
<p>p HMR的全称是Hot Module Replacement，翻译为模块热替换；<br />p 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；</p>
<p class="maodian"><a name="_label3_0_0_1"></a></p><h4>HMR 通过如下几种方式, 来提高开发的速度</h4>
<p>p 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；<br />p <strong>只更新需要变化的内容，节省开发的时间；</strong><br />p <strong>修改了css、js源代码</strong>，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；</p>
<p class="maodian"><a name="_label3_0_0_2"></a></p><h4>如何使用 HMR</h4>
<p>默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可**（默认已经开启）；**<br />在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；</p>
<p class="maodian"><a name="_label3_0_0_3"></a></p><h4>host 配置</h4>
<ul><li>host设置主机地址：</li></ul>
<p>默认值是localhost；<br />如果希望其他地方也可以访问，可以设置为 0.0.0.0；<br />port、open、compress<br />port设置监听的端口，默认情况下是8080</p>
<ul><li>open是否打开浏览器：</li></ul>
<p>默认值是false，设置为true会打开浏览器；<br />也可以设置为类似于 Google Chrome等值；</p>
<ul><li>compress是否为静态文件开启gzip compression：</li></ul>
<p>默认值是false，可以设置为true；</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202403/2024032714243239.png" /></p>
<p>到此这篇关于Webpack部署本地服务器的文章就介绍到这了,更多相关Webpack部署服务器内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
頁:
[1]