vue-cli下面的config/index.js注解 webpack.base.conf.js注解

config/indexjs详解上代码:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 代理作用是用来建一个虚拟api服务器用来代理本机的请求，只能用于本地开发模式
    proxyTable: {
      '/api': {
        target: 'http://10.0.111.111:9999', //要访问的后端接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'http://10.0.111.111:9999'
        }
      }
    },
    // 原本是localhost可以配置成自己的ip
    host: '10.98.15.99',
    // dev-server的端口号，可以自行更改
    port: 9898,
    // 是否自动打开浏览器
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    //是否使用语法检测
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    //是否生成css，map文件，上面这段英文就是说使用这个cssmap可能存在问题，但是按照经验，问题不大，可以使用
    //一般false处理
    cssSourceMap: true
  },

  build: {
    //下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    //下面定义的是静态资源的根目录 也就是dist目录
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
    assetsSubDirectory: 'static',
    // 下面定义的是静态资源的公开路径，也就是真正的引用路径,一般会加'./'
    assetsPublicPath: '/',

    /**
     * Source Maps
     */
    //下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
    //map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    //有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,

    // 下面定义要压缩哪些类型的文件
    productionGzipExtensions: ['js', 'css'],

    // 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭
    // 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

webpack.base.conf.js注解:

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

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

// 配置eslint检测
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  //文件入口配置
  entry: {
    app: ["babel-polyfill", "./src/main.js"] //ie11下白屏或者说es6转码都行 入口文件是src目录下的main.js
  },
  //文件出口配置
  output: {
    path: config.build.assetsRoot,// 路径是config目录下的index.js中的build配置中的assetsRoot，也就是dist目录
    filename: '[name].js',// 文件名称这里使用默认的name也就是main
    publicPath: process.env.NODE_ENV === 'production' // 上线地址，也就是真正的文件引用路径，如果是production生产环境，其实这里都是 '/'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    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'),
    }
  },
  // module用来解析不同的模块 插件配置项都在这了
  module: {
    rules: [
    //  ...(config.dev.useEslint ? [createLintingRule()] : []), //语法检测
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        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: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}