webpack4.0 入门实践教程(9)

日期：2020-05-11 栏目：程序人生浏览：次

webpack-dev-serve

上面讲到了都是如何打包文件，但是开发中我们需要一个本地服务，这时我们可以使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发。

webpack-dev-server 是 webpack 官方提供的一个工具，可以基于当前的 webpack 构建配置快速启动一个静态服务。当 mode 为 development 时，会具备 hot reload 的功能，即当源码文件变化时，会即时更新当前页面，以便你看到最新的效果。...

npm install webpack-dev-server -D

package.json 中 scripts 中添加

"start": "webpack-dev-server --mode development"

默认开启一个本地服务的窗口 http://localhost:8080/ 便于开发

配置开发服务器

我们可以对 webpack-dev-server 做针对性的配置

module.exports = {
 // 配置开发服务器
 devServer: {
 port: 1234,
 open: true, // 自动打开浏览器
 compress: true // 服务器压缩
 //... proxy、hot
 }
}

contentBase: 服务器访问的根目录（可用于访问静态资源）
port: 端口
open: 自动打开浏览器

模块热替换(hot module replacement)

模块热替换( HMR - Hot Module Replacement )功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容，以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

上面我们 npm start 后修改一次文件，页面就会刷新一次。这样就存在很大问题了，比如我们使用 redux , vuex 等插件，页面一刷新那么存放在 redux , vuex 中的东西就会丢失，非常不利于我们的开发。

HMR 配合 webpack-dev-server ，首先我们配置下 webpack.config.js

const webpack = require('webpack')

module.exports = {
 devServer: {
 //...
 hot: true
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()
 //...
 ]
}

配置后还不行，因为 webpack 还不知道你要更新哪里, 修改 src/index.js 文件, 添加

if (module.hot) {
 module.hot.accept()
}

重启服务， npm start 之后，修改引入 index.js 文件后，页面就不会重新刷新了，这便实现了 HMR

但是但是有个问题是，你修改 css/less 等样式文件并未发生改变， what ?

webpack4.0 入门实践教程(9)

相关推荐