26.搭建开发环境

开发环境 | webpack 中文文档 (docschina.org)

之前运行时出现的警告和mode配置有关

目标11：配置开发服务器环境 webpack-dev-server

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

   11.2 设置打包的模式为开发模式，配置自定义命令

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

注意1：webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务

注意2：默认以 public 文件夹作为服务器根目录

注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）

内存有，磁盘也有

output.path 的值

神奇操作

可自动跳转

可观察到自动打包及热更新

27.打包模式

不推荐配置项的方式（写完代码，还得记得修改值，不如记住命令）

代码被极致压缩

修改build命令

分成一段段的好处，某个文件的代码发生变化，直接替换对应名字对应的代码，让我们更快速看到开发项目的运行效果（模块热替换更快速）

补充：打包的main.css

28.打包模式的应用

需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

在开发模式下用 style-loader把css代码内嵌在js文件中，开发时如果样式发生修改，可以更快地替换到我们网页上

在生产模式下，想要把css单独提取成一个文件，为了让打包输出后的代码，在用户的浏览器上可以并行下载css和js代码

需要判断当前运行时所在的环境

方案1：webpack.config.js 配置导出函数

模式(Mode) | webpack 中文文档 (docschina.org)

只接受2种模式，但项目开发过程中，配置可能不止区分于两个环境，可能有测试环境，预发布环境，还有一些其他环境

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

独立文件

内嵌

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

生产环境 | webpack 中文文档 (docschina.org)

29.前端-注入环境变量

webpack 中文文档 (docschina.org)

webpack为内置

该插件会在webpack打包源代码时，把代码视作字符串，匹配到对应的key，会替换成value

（cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV，但打包后使用该插件打包会留下相应的字符串值）

不能直接使用表达式（字符串）

process.env.NODE_ENV

插件内部源码发现value为字符串，会将其视作变量

30.打包模式的应用

31.开发环境调错 - source map

开发环境 | webpack 中文文档 (docschina.org)

Devtool | webpack 中文文档 (docschina.org)

制作错误，在183行

报错行数与源码对不上

配置devtool选项，启动开发环境

点击跳转

所以上线不要使用source map

生产环境

打包后，只有一行，外加列数

32.解析别名 alias

使用别名

别名生效

33.优化-CDN使用

1.模板语法（html-webpack-plugin插件要求使用的语法）

学习过程中，使用免费的cdn服务

1.在 html 中引入第三方库的 CDN 地址 并用模板语法判断

（在网站里找到响应的网址）

2. 配置 webpack.config.js 中 externals 外部扩展选项

（防止某些 import 的包被打包）

如果为开发环境，cdn则不生效

3. 两种模式下打包观察效果

开发

查看源代码，没有cdn地址

生产

bootstrap样式没有一起被打包进来

axios的import语句变成了一个全局变量留在原地

网页样式正常，请求可发送

知识补充：

逻辑代码先于axios代码引入，为何正常执行？

——因为添加了defer属性

面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别_script的async和defer应用场景-CSDN博客

34.多页面打包

1.之前手写的js代码统一外部导入html使用，现在需要使用模块化导入入口文件

2.下载 form-serialize 包并导入到核心代码中使用（略过，该部分目前暂时没用上，表单搜集已经逐一手写过）

3.配置 webpack.config.js 多入口和多页面的设置（如图）

35.案例-发布文章页面打包

无论在本地开发，或打包到生产模式，都可以用cdn引入css，

不需要变量接收，用不到css代码里面的内容，

自己编写的代码（index.js）需要被处理，要引到入口js中

如果

本地开发用npm下载，

上线再用cdn要使用模板语法判断

wangeditor只能用require的方式代入（webpack两种导入方式都能识别）

36.优化-分割公共代码

生成公共代码：

37.总结