手动搭建webpack4.x+vue2.x 基础结构（二）实际开发中配置

上章没对模块解释，这章也会对各个模块进行解释。
上一章配置了一个webpack 的基本配置，能够基本的将我们的vue 项目正常编译出来。但是在实际开发过程中，项目都是很大的，如果我们每次改动都去build代码，很消耗时间，也是我们不想期望的，实际开发过程中也不是这样的，实际开发过程中，只有我们在生产环境上我们才去build代码，在开发过程中，我们一般通过一个服务器插件并通过热加载来快速完成我们的开发（这里我们采用webpack-dev-server 官方推荐的插件），并且，通过设置环境来打包编译我们开发和生产的项目。
这里先贴出webpack.config.js 和package.json和项目结构，后面我会依次解释。





配置几乎和上一章节差别不是很大。
先对各个模块解释（上章说了，webpack是模块化工具，直接使用是无法识别的，所以需要下列模块将资源模块化）。
vue-laoder : 用来处理vue文件。
babel-loader:用来处理es6，处理成浏览器能够识别的js。
style-loader/css-loader:css-loader用来处理css，将css模块化，这样我们能在代码中import 引入，style-loader，将css以style标签形式插入html。
extract-text-webpack-plugin：用来提取css文件。
url-loader：处理图片字体模块。
接着第一章节内容，安装webpack-dev-server。
npm install webpack-dev-server --save-dev
在我们webpack.config.js 中，

这里我们配置host和port（ip和端口），compress :是否压缩。stats：error-only–只展示错误信息，hot：热加载。其余请看官方配置，还有一个contentBase,这个参数是指资源根目录（这个参数一般我们用到第三方资源才配置）。
这里说明一下，在开发环境下，我们的资源将编译打包到dist目录下，但是这个dist是放在内存中的，所以我们是看不到，请注意上面的publicPath，这个是配置项目访问的资源路径。比如：我这里等同于dist目录，我们写 “/”，那么127.0.0.1:8080/ ----访问的就是我dist下的index.html；如果我们写成“/static/”,那么访问dist下的index.html就是：127.0.0.1:8080/static/ 这个地址。默认的是dist目录下（所以开发环境下，如果配置成“./”，这个是找不到的）。
接着配置我们的热加载。是hot 这个参数，上面已经说明了。
记住，这个hot一定要放在devServer里面，如果放在命令行中，是不起作用的。看下图，我们可以将自动刷新inline参数配置在里面，但是hot:true要配置在devServer里面。

上面几个参数我等会再说。
继续说热加载。除了在devServer配置 hot，我们还要在插件参数里面：

new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
让插件生效。
到这里，我们的开发环境的配置就结束了，接下来，配置当我们运行
npm run build 生成生产环境下的实际资源。
npm run dev 来进行开发。
这个是如何实现的呢？
这里介绍一下 process.env 这个是node 环境自带的一个环境对象，我们需要用到它来判断当前环境，还有一个点，就是mode 这个参数。

mode 这个参数时webpack4.新增的，以前我们要写需要在plugins中添写。
mode 这个参数值有3个：production 和 development 还有 none，这个参数配置上，我们可以在我们项目的js里 通过process.env.NODE_ENV 可以拿到这三个值，来进行我们的实际开发。

但是这个不是我们需要的，哈哈哈，被骗的感觉是不是？
其实我们需要的是在全局配置中获取的环境。按照以前的写法，在命令写入：
NODE_ENV=dev webpack-dev-server --inline --progress
我们会发现在webpack.config.js 中所获取的process.env.NODE_ENV 为undefined。这是为什么呢？因为在windows 设置NODE_ENV=dev 这个命令是无效的，你需要一个cross-env（跨平台脚本）
npm install cross-env --save-dev

加上cross-env之后，在我们需要环境判断的地方加上，比如我们的publicPath，css是否提取（这里需要注意，开发环境不需要提取css，不然热加载css 无法监测），还有一种方式就是我不想用cross-env 这个跨平台脚本，我的是windows系统，可以这样写
set NODE_ENV=dev && webpack-dev-server --inline --progress

看一下效果：

当你修改你的vue文件等等，控制台出现这样热加载的进度时，说明成功了。