路飞C#21天从入门到精通

download：C#21天从入门到精通

开发环境中心思想

在上文我们提到，我们在运用webpack时，经常会看到相似以下目录：

build
├── webpack.common.js
└── webpack.dev.js
└── webpack.prod.js

为什么我们需求把配置文件拆解成这么多，那么繁琐呢？

我们先回忆一下，在我们在实践开发中，为了项目可以稳定平安上线，我们普通会分好几个环境：

• 开发环境：在本地停止开发，调试的环境
• 测试环境：我们在本地开发完成后，将代码部署到我们的测试效劳器，停止测试
• 消费环境：测试经过，将代码部署到正式效劳器，正式上线

有些更严厉的测试，还会有预消费环境等

我们的配置应该对环境具有针对性，因而不同的环境，我们的配置当然不能千篇一概。

目的

我们要先分明开发环境基本的目的是什么。

开发环境的基本目的，就是在开发过程中，能快速定位到问题，更快能看到效果调试，进步开发效率。

特别作为前端，离不开跟视觉打交道。我们恨不得Ctrl+S后，立马出效果，便当我们快速调试。试想一下，假如每次写完一个效果，要等上几秒钟才干看到，这会不会把我们逼疯？

思想

因而，为了能让我们尽快看到效果调试，减少webpack的编译过程，开发环境，配置应该一切从简：

• 对款式，我们不需求别离，直接用style-loader插入到
• 对js、img、media、font等前端资源文件，不需求分包
• 开启source map，便当定位问题
• 运用webpack提供的devServer配置项，停止本地开发
• 不要紧缩代码
• 不用没必要的loader跟plugins
• ...

开发环境配置，也因人而异，以上是我的做法。但是我们要记得，开发环境，配置应该一切从简，为了让我们可以更快看到效果，进步开发效率

开发环境配置

初体验

经过前一篇文章的解说，置信大家对webpack的根底配置：

• 处置css、less、前端资源等文件
• 编译es6+语法及api
• 处置html文件

曾经控制了相关的配置办法，并且我们还总结了一份根底的配置，不太分明的同窗能够看一下先，这个根底配置还是蛮重要的。

ok，那我们先用 learn-08 这个案例来体验一下如何停止本地开发调试。为了尽量贴近我们理想中开发的项目，案例里会：

• 在html里面援用图片
• 运用less里面援用图片
• 在js里运用es6+，动态加载图片
• 运用devServer配置项

为了阅读便当，详细的源码就不放文章了，大家能够去 github 看

然后停止以下步骤：

1. 为了语义化，我们把webpack配置文件命名为webpack.dev.js

2. 运用命令行启动webpack——npm start

   "scripts": {
    "start": "webpack server --config ./webpack.dev.js"
   }
   

运转结果：

我们会发现：

• 文件编译处置完成后，不会输出任何文件
• 此时开启了一个内部效劳器（http://192.168.0.196:8080/）。假如我们的手机与电脑用的同个网络，用手机访问这个链接，就能看到效果了。这对调试H5开发是非常高效的（这主要归功于deveServer配置项，后文会有解说）
• 我们修正代码后，页面会实时更新

以上简直是我们想要的高效开发效果。