webpack-dev-server搭建本地服务器以及配置文件的抽离

一.搭建本地服务器

webpack提供了一个可选的本地开发服务器，该服务器基于node.js搭建，可以实现我们想让浏览器自动刷新显示我们修改的结果，它将我们修改的内容暂时放到内存中，直至最后npm run build才保存至磁盘。

• 首先，在webpack中使用之前需要先安装：npm install --save-dev webpack-dev-server@2.9.1
• 接着在webpack.config.js文件中添加属性devServer

module.exports={
	...
	devServer:{
		contentBase:'./dist',
		online:true,  // 是否实时监听
	}
}

• 然后在package.josn文件中，添加'dev':'webpack-dev-server'
  

• 接着在终端执行npm run dev即可，终端将返回一个本地连接，在这里我们就能实时监听修改的结果了
  

• 当本地测试结束时，在终端输入npm run build实现最终的打包

注意：如果希望输入npm run dev后，服务器自动打开，则需要额外输入–open,即：

二.webpack配置文件的抽离

有些配置是开发时需要配置的（如devServer)，而有些配置是打包时才使用到的，因此需要抽离出来

• 首先我们在目录下方新建一个build文件夹，用来存放所有的配置信息
• 其次建三个子js文件：base.congif.js , prod.config.js , dev.config.js
• 将基础公用的放在base中，开发中需要的放在dev中，生产需要的放在prod中
• 然后，需要在终端执行npm install webpack-merge --save-dev，以混合配置文件

• 此时build文件中的三个配置文件就可以替代webpack.config.js文件了，即可以删除webpack.config.js文件
• 然而，删除后，我们还需要在package.json中手动修改build和dev的路径，以避免报错
  
  注意：此时执行npm run build后，会将dist文件夹打包到build文件夹中，但是我们希望它创建在根目录下，因此需要在base.config.js中修改：
  造成此现象的原因是：因在原base.config.js中，我们将路径设置为./dist，即当前文件下的dist文件夹，但是当抽离出配置文件之后，当前文件为build，因此会创建在build文件夹下，故需要修改路径为**…/dist**