Vue学习笔记之Webpack搭建本地服务器及配置文件的分离

1、webpack提供了一个可选的本地开发服务器（修改的文件先存储在内存中），这个本地开发服务器基于node.js搭建的，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果，就避免了我们每次修改了代码都要执行npm run build进行打包动作，界面上才会更新我们修改的东西。

2、环境安装：cnpm install [email protected] --save-dev

3、配置环境属性：

contentBase：为哪一个文件夹提供本地服务器，默认是根目录，而我们这边需要指定目录：./dest

port：端口号（可以不指定，默认为8080端口）

inline：页面实时刷新

historyApiFallback：在SPA页面中，依赖HTML5的history模式

4、运行服务：webpack-dev-server，最后完成修改再通过npm run build将项目打包成物理文件。

为了简化命令，同时让项目在本地找此命令(安装是没有选择全局变量，如果不配置，直接执行，会报错说此命令不存在，因为安装时是局部安装，所以全局是找不到此命令的)：

PS： --open 的命令是在你执行完npm run dev命令时直接就打开浏览器进行预览了。

这样运行后，更新的代码是先保存内存中，并未直接生成物理文件：

此时直接访问本地服务器的地址即可。

5、配置文件的分离：然而，在开发时，不需要进行js代码的压缩，这样不利于代码调试，在真正项目打包的时候再进行代码压缩；同时，在正式打包项目的时候，本地服务器的配置也是不需要进行打包的。所以，可以把这些配置文件进行分离：将开发时跟发布需要的进行分离

首先，创建一个新的配置文件：base.config.js文件，然后将webpack.config.js里面内容全部拷贝过去，注释或删除掉开发、项目打包需要的配置，留下基本的配置内容：

然后新增两个配置文件：dev.config.js（开发需要的配置）和prod.config.js（打包发布需要的配置）分别满足开发及打包发布时的配置文件：

开发需要的配置文件：

项目打包需要的配置文件：

接下来，在开发的时候将 base.config.js 与 dev.config.js 文件进行合并编译，在项目打包的时候则将 base.config.js 与 prod.config.js 文件进行合并编译，但是，做这个动作需要merge(合并)命令进行辅助编译，所以我们需要安装此环境：cnpm install [email protected] --save-dev

安装成功后，在dev跟prod两个配置文件中导入此环境，然后通过此命令进行合并：

合并prod的内容：

最后在build 跟 dev 中指定需要执行的目录文件即可：

PS：此时配置完后，原来的webpack.config.js文件就可以删除不用了。

但是，此时去打包项目文件的时候，发现打包文件被打包到build的目录下了，并没有将文件打包到根目录下的dist文件家里面：

原因是base配置文件在build目录下，所以编译的时候在本目录下增加一个dist文件，所以要修改dist文件的生成目录：将 dist 改为 ../dist ：

最后重新再打包项目，则将文件正常生成在根目录下的dist文件夹中。