vue-cli脚手架npm相关文件解读（1）webpack.base.conf.js

系列文章传送门：

1、build/webpack.base.conf.js     

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.js

下面是build/webpack.base.conf.js中相关代码和配置的说明

项目地址：https://github.com/SmileSmith（感觉不错的话帮忙打个星哈 ~）

/*
 * Webpack 基础配置文件，用于开发环境和生产环境
 * 在prod.conf 和 dev.conf都会用merge的方式引用这里的配置
*/

var path = require('path')
var utils = require('./utils') // css类的loader配置集。主要用来处理css-loader和vue-style-loader
var config = require('../config') // 项目自定义的配置文件
var vueLoaderConfig = require('./vue-loader.conf') // vue-loader.conf配置文件是用来解决各种css文件的

// 获取路径的函数，因为该文件在项目的二级目录build下，要找到src这样的二级目录，需要加上../
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    // 入口文件是src目录下的main.js
    app: './src/main.js'
  },
  output: {
    // 输出文件的路径：config目录下的index.js，path.resolve(__dirname, '../dist')
    path: config.build.assetsRoot,
    // 输出文件的名称：name是保持和entry入口的文件名一致
    filename: '[name].js',
    // 文件引用路径，例如index.html中引用vendor.js的src
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath // / 最后得到 /static/js/vendor.js
      : config.dev.assetsPublicPath // /  最后得到 /static/js/vendor.js
  },
  resolve: {
    // resolve是webpack的内置选项，顾名思义，决定要做的事情，如何处理 import 明明
    extensions: ['.js', '.vue', '.json'],
    alias: {
      // 后面的$符号指精确匹配，也就是说只能使用 import vuejs from "vue" 这样的方式导入vue.esm.js文件，不能在后面跟上 vue/vue.js
      'vue$': 'vue/dist/vue.esm.js',
      // resolve('src') 其实在这里就是项目根目录中的src目录，使用 import somejs from "@/some.js"
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        // 正则表达式，需要执行规则的文件
        test: /.(js|vue)$/,
        // 用eslint进行代码检查
        loader: 'eslint-loader',
        // 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
        enforce: 'pre',
        // include选项指明这些目录下的文件要被eslint-loader检测，还有exclude表示排除某些文件夹
        include: [resolve('src'), resolve('test')],
        options: {
          // formatter是参数的名称，eslint-friendly-formatter是eslint的一个报告总结插件，也就是说eslint的检测
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /.vue$/,
        loader: 'vue-loader',
        // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          // 限制 10000 个字节以下的图片才使用DataURL
          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]')
        }
      }
    ]
  }
}

参考：http://www.cnblogs.com/ye-hcj/archive/2017/06.html