webpack解读3（webpack.config）

/*
 * 公共文件的配置，多个文件可以引用
 * */

// nodejs 中的path模块
var path = require('path')
//引入公共配置文件
var config = require('../config/index')
//引入小工具
var utils = require('../config/utils')
//引入webpack
var webpack = require('webpack')


var vueLoaderConfig = require('./vue-loader.conf')

// 路径拼接
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}


module.exports = {
  entry: {
    //编译入口文件
    index: [path.resolve(__dirname, '../app/index.js')]
  },
  output: {
    // 编译完静态资源根目录
    path: config.build.assetsRoot,
    //publicPath: config.build.assetsPublicPath,
    //编译输出主入口的文件名
    filename: utils.assetsPath('[name].[hash].js')
  },
  resolve: {
    //自动扩展后缀名，require模块可以省咧不写后缀名
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    //在webpack中使用别名把请求重定向到另一个路径
    // 例如：require('vue')=>require('vue/dist/vue.common.js')
    alias: {
      "vue$": 'vue/dist/vue.common.js',
      "assets": resolve(__dirname, 'app/assets'),
      "components": resolve(__dirname, 'app/components'),
      //"jquery":path.resolve(__dirname,'../app/plugins/jquery-3.2.1.min')
    }
  },
  //外部依赖不需要打包进 bundle
  // 配置了这个属性之后 react 和 react-dom 这些第三方的包都不会被构建进 js 中，那么我们就需要通过 cdn 进行文件的引用了
  // 前边的这个名称是在项目中引用用的，相当于 import React from 'react1' 中的 react
  /* externals: {
   'moment': true,
   'jquery': 'jQuery'
   },*/
  /*resolveLoader: {
   fallback: [path.join(__dirname, '../node_modules')]
   },*/
  // 模块的加载相关规则
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('app')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  /* plugins:[
   new webpack.ProvidePlugin({
   $:"jquery"
   })
   ],*/
  /*vue:{
   loaders:utils.cssLoaders({ sourceMap: true })
   }*/

}