Webpack部署本地服务器


目的

1. 完成自动编译<strong>常用方式</strong>: webpack-dev-server

复制代码

1. webpack-dev-server

复制代码

是一个用于开发环境的 Web 服务器，它集成了 Webpack，并提供了实时重新加载和热替换等功能。以下是一个简单的

1. webpack-dev-server

复制代码

配置和使用示例：
1.首先，确保已经安装了

1. webpack

复制代码

,

1. webpack-cli

复制代码

和

1. webpack-dev-server

复制代码

。如果没有安装，可以使用以下命令进行安装：

1. npm install --save-dev webpack webpack-cli webpack-dev-server -D   // 开发环境

复制代码

2.在项目根目录下创建一个名为

1. webpack.config.js

复制代码

的文件，用于存放 Webpack 配置信息：

1. const path = require('path');
   
2. module.exports = {
   
3.   entry: './src/index.js',
   
4.   output: {
   
5.     filename: 'main.js',
   
6.     path: path.resolve(__dirname, 'dist'),
   
7.   },
   
8.   devServer: {
   
9.     contentBase: path.join(__dirname, 'dist'),
   
10.     // 是否为静态文件开启 gzip compression 默认是false
    
11.     compress: true,
    
12.     port: 9000,
    
13.     // open 是否打开浏览器, 默认是 false
    
14.     open: true,
    
15.     hot: true,
    
16.   },
    
17. };

复制代码

这个配置文件定义了入口文件为

1. src/index.js

复制代码

，输出文件为

1. dist/main.js

复制代码

，并配置了

1. webpack-dev-server

复制代码

的相关参数。
3.在项目的

1. package.json

复制代码

文件中添加一个启动脚本：

1. {
   
2.   "scripts": {
   
3.     "serve": "webpack serve"
   
4.   }
   
5. }

复制代码

现在，可以通过运行

1. npm run serve

复制代码

命令来启动

1. webpack-dev-server

复制代码

。服务器将在端口 9000 上启动，并在默认浏览器中打开

1. http://localhost:9000

复制代码

。当你对

1. src/index.js

复制代码

文件进行更改时，服务器将自动重新加载和热替换。 认识模块热替换（HMR）

什么是 HMR

p HMR的全称是Hot Module Replacement，翻译为模块热替换；
p 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

HMR 通过如下几种方式, 来提高开发的速度

p 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
p 只更新需要变化的内容，节省开发的时间；
p 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

如何使用 HMR

默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可**（默认已经开启）；**
在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

host 配置

• host设置主机地址：
  

默认值是localhost；
如果希望其他地方也可以访问，可以设置为 0.0.0.0；
port、open、compress
port设置监听的端口，默认情况下是8080

• open是否打开浏览器：
  

默认值是false，设置为true会打开浏览器；
也可以设置为类似于 Google Chrome等值；

• compress是否为静态文件开启gzip compression：
  

默认值是false，可以设置为true；

到此这篇关于Webpack部署本地服务器的文章就介绍到这了,更多相关Webpack部署服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！