20191023——复习webpack.base.conf.js

此文章来解释vue-cli脚手架中，build目录中的webpack.base.conf.js配置文件

var path = require('path')  //引用node.js模块

var utils = require('./utils')  //主要处理css-loader

var config = require('../config') //引入config目录下的index.js配置文件，主要定义一些开发和生产

var vueLoaderConfig = require('./vue-loader.conf') //解决css文件

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}//函数用来返回当前的平行目录的路径

module.exports
entry: {
    // 入口文件是src目录下的main.js
    app: './src/main.js'
  },
output: {
    // 路径是config目录下的index.js中的build配置中的assetsRoot，也就是dist目录
    path: config.build.assetsRoot,
    // 文件名称这里使用默认的name也就是main
    filename: '[name].js',
    // 上线地址，也就是真正的文件引用路径，如果是production生产环境，其实这里都是 '/'
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
 resolve: {
    // resolve是webpack的内置选项，顾名思义，决定要做的事情，也就是说当使用 import "jquery"，该如何去执行这件事
    // 情就是resolve配置项要做的，import jQuery from "./additional/dist/js/jquery" 这样会很麻烦，可以起个别名简化操作
    extensions: ['.js', '.vue', '.json'], // 省略扩展名，也就是说.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')
    }
  },