【webpack】webpack.base.conf.js基础配置

function resolve (dir) {
  return path.join(__dirname, ‘..‘, dir)
} 

封装函数，进行传参，获取绝对路径，方便对import时引入地址的填写
path.join ：对多个字符串进行拼接

 entry: {
    app: ‘./src/main.js‘
  },
打包的入口js文件

output: {
    path: config.build.assetsRoot, (config.build.assetsRoot===path.resolve(_dirname,‘../dist‘)作者把想打包出来的文件领放在根目录下的dist目录下)
    filename: ‘[name].js‘, 用来打包出的文件名，因为会打包出来的文件是三个文件，一个是自己的源代码文件，一个是runtime文件，一个是ventor文件
    publicPath: process.env.NODE_ENV === ‘production‘  静态文件访问的路径，根据静态文件的loader进行拼接配置，当进行环境是生产环境的话，我们就用config文件中的config.build.assetsPublicPath这个属性，如果是生产环境，则用config.dev.assetsPulicPath
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
output是我们输文件输出的路径

 resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],是对模块的后缀进行解析，当我们引入自己写的模块的时候，没有带js后缀，那文件会不会识别，本质上不会识别，但是有了这个配置，会先对.js后缀进行匹配，没有再匹配.vue，没有在匹配.json，还是没有找到的话，则会报错

    alias: { 
　　　　‘vue$‘: ‘vue/dist/vue.esm.js‘, 配置别名，如果你在一个很深的文件引入其他文件中有一个很深的文件，我们就用@来代替src
　　　　 ‘@‘: resolve(‘src‘) 
   } 
},
relove是用来对模块进行解析，就是所谓的Libary第三方库

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        include: [resolve(‘src‘), resolve(‘test‘)]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000,
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000,
          name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
        }
      }
    ]
  }