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

2023-05-16

在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 ！！
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)