webpack.base.conf.js文件

1. 文件开头的path模块提供了用于处理文件和目录路径的使用工具。utils是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader。引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性。vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader 。
   const path = require( 'path')

   const utils = require( './utils')

   const config = require( '../config')

   const vueLoaderConfig = require( './vue-loader.conf')
   
   
2. 关于文件中的exports输出对象：
   module. exports = {

   //运行环境的上下文，就是实际的目录

   context : path . resolve( __dirname, '../'),

   //入口文件

   entry : {

   app : './src/main.js'

   },

   //输出内容，这内部的配置会根据不同的运行环境来进行变化

   output : {

   path : config .build .assetsRoot,

   filename : '[name].js',

   publicPath : process . env .NODE_ENV === 'production' ?

   config .build .assetsPublicPath : config .dev .assetsPublicPath

   },

   resolve : {

   extensions : [ '.js', '.vue', '.json'],

   //extensions字段，指定检测的文件后缀

   alias : {

   //alias用于指定别名的。在引用文件路径中，如果有别名的符号，会被替换成指定的路径。

   'vue$': 'vue/dist/vue.esm.js',

   '@': resolve( 'src'),

   }

   },

   //module配置一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。

   //安装项目依赖包之后，一般都要检查rules里面是否有对应的loader配置

   module : {

   rules : [{

   test : / \. vue $ /,

   loader : 'vue-loader',

   options : vueLoaderConfig

   },

   {

   test : / \. s [a|c] ss $ /,

   loader : [ "style-loader", "css-loader", "sass-loader"]

   },

   {

   test : / \. js $ /,

   loader : 'babel-loader',

   include : [

   resolve( 'src'),

   resolve( 'test'),

   resolve( 'node_modules/webpack-dev-server/client')

   ]

   },

   {

   test : / \. (png | jpe ? g | gif | svg)( \?. * ) ?$ /,

   loader : 'url-loader',

   options : {

   limit : 10000,

   name : utils . assetsPath( 'img/[name].[hash:7].[ext]')

   }

   },

   {

   test : / \. (mp4 | webm | ogg | mp3 | wav | flac | aac)( \?. * ) ?$ /,

   loader : 'url-loader',

   options : {

   limit : 10000,

   name : utils . assetsPath( 'media/[name].[hash:7].[ext]')

   }

   },

   {

   test : / \. (woff2 ?| eot | ttf | otf)( \?. * ) ?$ /,

   loader : 'url-loader',

   options : {

   limit : 10000,

   name : utils . assetsPath( 'fonts/[name].[hash:7].[ext]')

   }

   }

   ]

   },

   //node主要是阻止一些webpack的默认注入行为，因为在vue中，已经具备了这些功能

   node : {

   setImmediate : false,

   dgram : 'empty',

   fs : 'empty',

   net : 'empty',

   tls : 'empty',

   child_process : 'empty'

   }

   }