浅谈Vue-cli 命令行工具分析(3)

'use strict'
const path = require('path');
const utils = require('./utils');
const config = require('../config');

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

module.exports = {
 context: path.resolve(__dirname, '../'), // 基础目录
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot, // 默认'../dist'
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath // 生产模式publicpath
  : config.dev.assetsPublicPath // 开发模式publicpath
 },
 resolve: { // 解析确定的拓展名，方便模块导入
  extensions: ['.js', '.vue', '.json'], 
  alias: {  // 创建别名
   'vue$': 'vue/dist/vue.esm.js', 
   '@': resolve('src') // 如 '@/components/HelloWorld'
  }
 },
 module: {
  rules: [{
    test: /\.vue$/, // vue 要在babel之前
    loader: 'vue-loader',
    options: vueLoaderConfig //可选项： vue-loader 选项配置
   },{
    test: /\.js$/, // babel
    loader: 'babel-loader',
    include: [resolve('src')]
   },{ // url-loader 文件大小低于指定的限制时，可返回 DataURL，即base64
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // url-loader 图片
    loader: 'url-loader',
    options: { // 兼容性问题需要将query换成options
     limit: 10000, // 默认无限制
     name: utils.assetsPath('img/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash
    }
   },{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // url-loader 音视频
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // url-loader 字体
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },
 node: { // 是否 polyfill 或 mock
  setImmediate: false,
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty'
 }
}

'use strict'
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const portfinder = require('portfinder'); // 自动检索下一个可用端口
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 友好提示错误信息

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    // 自动生成了 css, postcss, less 等规则，与自己一个个手写一样，默认包括了 css 和 postcss 规则
  },

  devtool: config.dev.devtool,// 添加元信息(meta info)增强调试

  // devServer 在 /config/index.js 处修改
  devServer: {
    clientLogLevel: 'warning', // console 控制台显示的消息，可能的值有 none, error, warning 或者 info
    historyApiFallback: true, // History API 当遇到 404 响应时会被替代为 index.html
    hot: true, // 模块热替换
    compress: true, // gzip
    host: process.env.HOST || config.dev.host, // process.env 优先
    port: process.env.PORT || config.dev.port, // process.env 优先
    open: config.dev.autoOpenBrowser, // 是否自动打开浏览器
    overlay: config.dev.errorOverlay ? { // warning 和 error 都要显示
      warnings: true,
      errors: true,
    } : false,
    publicPath: config.dev.assetsPublicPath, // 配置publicPath
    proxy: config.dev.proxyTable, // 代理
    quiet: true, // 控制台是否禁止打印警告和错误 若使用 FriendlyErrorsPlugin 此处为 true
    watchOptions: {
      poll: config.dev.poll, // 文件系统检测改动
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env') // 判断生产环境或开发环境
    }),
    new webpack.HotModuleReplacementPlugin(), // 热加载
    new webpack.NamedModulesPlugin(), // 热加载时直接返回更新的文件名，而不是id
    new webpack.NoEmitOnErrorsPlugin(), // 跳过编译时出错的代码并记录下来，主要作用是使编译后运行时的包不出错
    new HtmlWebpackPlugin({ // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去
      filename: 'index.html',
      template: 'index.html',
      inject: true // 可能的选项有 true, 'head', 'body', false
    }),
  ]
})

module.exports = new Promise((resolve, reject) => {
 portfinder.basePort = process.env.PORT || config.dev.port; // 获取当前设定的端口
 portfinder.getPort((err, port) => {
  if (err) { reject(err) } else {
   process.env.PORT = port; // process 公布端口
   devWebpackConfig.devServer.port = port; // 设置 devServer 端口

   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 错误提示插件
    compilationSuccessInfo: {
     messages: [`Your application is running here: http://${config.dev.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined
   }))

   resolve(devWebpackConfig);
  }
 })
})