Webpack5学习笔记（基础篇五）—— mode之Development环境相关参数配置

在Webpack5中，mode（模式）有三种：

development（开发环境模式）
production（生产环境模式）
none或' '（空）

在不同模式中，我们可能对于webpack.config.js配置文件进行不同参数的设置

比如，在development开发环境中，我们可能使用devTool，devServer等对webpack打包后的代码进行浏览器调试；在production生产环境中，我们可能在optimization配置下面的minimizer中使用CssMinimizerPlugin进行Css代码压缩，在performance配置下面使用hints解决打包时性能方面超出的提示

1、webpack-dev-server

webpack-dev-server提供了一个基本的 web server，并且具有 live reloading(实时重新加载)的功能。

首先，我们安装webpack-dev-server

npm install webpack-dev-server --save-dev
或
npm install webpack-dev-server -D

1.1、devServer的基础配置

接着，我们在目录下创建相关文件

hello.js

function hello(){console.log("hello")
}
export default hello

index.js

import hello from './hello'hello()

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你是——YYDS</title>
</head>
<body>
</body>
</html>

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry : './src/index.js',output : {/* 指定输出文件的文件名称 */filename:'bundle.js',/* path必须使用绝对路径 *//* 指定输出文件的路径 */path:path.resolve(__dirname,'./dist')clean:true},mode : 'development',/* development环境通过控制台定位代码执行在具体哪一行 */devtool:'inline-source-map',plugins:[new HtmlWebpackPlugin({template:'./index.html',filename:'app.html',inject:"body"})],devServer:{static:'./dist'},
}

可以看出，在webpack.config.js中配置devServer的static参数

devServer:{static:'./dist'
},

static:'./dist'表示devServer将当前指向的物理路径设置成dist文件，作为我们server的根目录

打包：

npx webpack

启动webpack-dev-server：

npx webpack-dev-server

打开http://localhost:8080/，我们发现在控制台中成功打印了hello，同时开启了Hot Module Replacement enabled 和 Live Reloading enabled

当我们将我们的hello.js中hello改为hello world，保存后，浏览器控制台会同步更新

1.2、webpack-dev-server的真相

事实上，webpack-dev-server并没有真正输出任何物理文件，它只是将我们打包后的bundle文件存放到了内存中。

为了测试，我们将刚才通过npx webpack打包后的dist文件夹整个删除

然后我们重新刷新浏览器，发现浏览器控制台仍然打印了hello world

如果你还有疑问，我们接着测试，我们ctrl + c先关闭当前webpack-dev-server，再重新启动webpack-dev-server，同时我们将hello world改为hello world ！！，然后我们重新刷新浏览器，发现浏览器控制台仍然打印了hello world ！！