关于webpack2.0打包 vue项目的一些基础配置

以下是关于webpack2.0打包 vue项目的一些基础配置，当然目前webpack3.0和4.0已出，应该比较少小伙伴用2.0了，有需要的小伙伴可继续往下看，废话不多说，直接上代码

7.1 config/index文件的主要配置说明

7.1.1 本地测试环境配置，配置config/index文件中，dev模块配置为绝对路径，如图

7.1.2配置本机的IP和端口，可设置成通用模式localhost 

7.1.3配置运行成功，是否自动打开默认浏览器，true为打开，false为不打开

7.1.4 打包环境，配置config/index文件中，build模块配置为相对路径，static为编译出来后的二级目录，如图

    7.1.5 配置打包工具的模式，如图，

     devtool打包工具的模式有多种，详细了解可去官网： https://www.wepackjs.com/configuration/devtool/

7.2  build环境的基础配置，配置文件build/webpack.base.conf.js文件的主要说明

   7.2.1 自动解析扩展名的配置，使导入模块时不需要带扩展名，就能读取到文件

   7.2.2 配置路径别名，例如用‘@’表示src为当前路径

   7.2.3 解析vue,js,css，img等文件的规则配置

 7.3 配置文件build/webpack.dev.conf.js的主要配置

 

7.3.1 配置网页的ico，配置favicon的属性即可，resove为获取ico的路径,同时 inject:true,即为在body中插入<script></script>标签，false为在head中插入<script></script>标签

7.4 配置文件build/webpack.prod.conf.js的主要配置

     7.4.1 配置编译打包后的图标为相对路径， 设置extract属性，true为绝对路径，false为相对路径

     7.4.2 配置打包输出的css和js的文件为相对路径，设置publicPath为“./”即可，如图

 

     7.4.3 配置压缩代码模块， 禁用consol.log()函数， 即生产环境不会输出打印，如图设置drop_console: true, pure_funs:['console.log']