搭建开发环境

改代码，需要重新打包才能运行查看，效率很低

开发环境：配置webpack-dev-server 快速开发应用程序

作用：启动Web服务，自动检测代码变化，热更新到网页

注意：dist 目录和打包内容是在内存里（更新快）

步骤：

1、下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

2、设置模式为开发模式，并配置自定义命令

//...

module.exports = {
    //...
    mode:'development'
}

"scripts":{
    "build":"webpack",
    "dev":"webpack serve --open"
}

3、使用 npm run dev 来启动开发服务器，试试热更新效果

打包模式

打包模式：告知 Webpack 使用相应模式的内置优化
设置：
方式1：在 webpack.config.js 配置文件设置 mode 选项

module.exports = {
    //...
    mode:'production'
};

方式2：在 package.json 命令行设置 mode 参数

"scipts":{
    "build":"webpack --mode=production"
    "dev":"webpack serve --mode=development"
}

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

打包模式的应用

需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码
方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）
方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境
步骤：
1、下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2、配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

"scipts":{
     "test":"echo \"Error:no test specified\" && exit 1",
     "build":"cross-env NODE_ENV=production webpack --mode=production",
     "dev":"cross-env NODE_ENV=development webpack serve --open --mode=development"
}

3、在 webpack.config.js 区分不同环境使用不同配置
4、重新打包观察两种配置区别

方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）