专栏首页小蔚记录vue -- 脚手架之webpack.dev.conf.js

vue -- 脚手架之webpack.dev.conf.js

webpack.dev.conf.js 开发环境模式配置文件:

'use strict'//js按照严格模式执行
const utils = require('./utils')//导入utils.js
const webpack = require('webpack')//使用webpack来使用webpack内置插件
const config = require('../config')//config文件夹下index.js文件
const merge = require('webpack-merge')//引入webpack-merge插件用来合并webpack配置对象,也就是说可以把webpack配置文件拆分成几个小的模块,然后合并
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')//导入webpack基本配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')//生成html文件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')//获取port

const HOST = process.env.HOST//process.env属性返回一个对象,包含了当前shell的所有环境变量。这句取其中的host文件?
const PORT = process.env.PORT && Number(process.env.PORT)//获取所有环境变量下的端口?

//合并模块,第一个参数是webpack基本配置文件webpack.base.conf.js中的配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })//创建模块时匹配请求的规则数组,这里调用了utils中的配置模板styleLoaders
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,//debtool是开发工具选项,用来指定如何生成sourcemap文件,cheap-module-eval-source-map此款soucemap文件性价比最高

  // these devServer options should be customized in /config/index.js
  devServer: {//webpack服务器配置
    clientLogLevel: 'warning',//使用内联模式时,在开发工具的控制台将显示消息,可取的值有none error warning info
    historyApiFallback: {//当使用h5 history api时,任意的404响应都可能需要被替代为index.html,通过historyApiFallback:true控制;通过传入一个对象,比如使用rewrites这个选项进一步控制
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,//是否启用webpack的模块热替换特性。这个功能主要是用于开发过程中,对生产环境无帮助。效果上就是界面无刷新更新。
    contentBase: false, // since we use CopyWebpackPlugin.这里禁用了该功能。本来是告诉服务器从哪里提供内容,一半是本地静态资源。
    compress: true,//一切服务是否都启用gzip压缩
    host: HOST || config.dev.host,//指定一个host,默认是localhost。如果有全局host就用全局,否则就用index.js中的设置。
    port: PORT || config.dev.port,//指定端口
    open: config.dev.autoOpenBrowser,//是否在浏览器开启本dev server
    overlay: config.dev.errorOverlay//当有编译器错误时,是否在浏览器中显示全屏覆盖。
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,//此路径下的打包文件可在浏览器中访问
    proxy: config.dev.proxyTable,//如果你有单独的后端开发服务器api,并且希望在同域名下发送api请求,那么代理某些URL会很有用。
    quiet: true, // necessary for FriendlyErrorsPlugin  启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
    watchOptions: {//webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下,不会正常工作。例如,当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下使用轮询。
      poll: config.dev.poll,//是否使用轮询
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({//模块HtmlWebpackPlugin
      filename: 'index.html',//生成的文件的名称
      template: 'index.html',//可以指定模块html文件
      inject: true//在文档上没查到这个选项 不知道干嘛的。。。
    }),
    // copy custom static assets
    new CopyWebpackPlugin([//模块CopyWebpackPlugin  将单个文件或整个文件复制到构建目录
      {
        from: path.resolve(__dirname, '../static'),//将static文件夹及其子文件复制到
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']//这个没翻译好,百度翻译看不懂,请自己查文档。。。
      }
    ])
  ]
})
//webpack将运行由配置文件导出的函数,并且等待promise返回,便于需要异步地加载所需的配置变量。
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({//出错友好处理插件
        compilationSuccessInfo: {//build成功的话会执行者块
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors//如果出错就执行这块,其实是utils里面配置好的提示信息
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript事件代理和委托(Delegation)

    首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点...

    小蔚
  • js--- 堆栈 于拷贝

    stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

    小蔚
  • react ----- 路由懒加载的几种实现方案

    符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模...

    小蔚
  • vue项目中使用rimraf dev启动时删除dist目录

    //适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录 webpack.dev.conf.js

    yangdongnan
  • 前端-团队效率(三)Vue cli3 配置

    以下是本人的Vue cli3 配置 (如遇问题升级webpack到4.16.5,其他还有问题可以留言,版本兼容问题确实是脚手架配置阶段的核心问题)

    吴文周
  • ORM,curd操作,连贯操作,ActiveRecord的区别和联系

    简单说就是把关系型数据库映射成对象模型。用对象来操作数据库。 例如: 数据库里面一个User表,有很多字段。编程时候用对象模型就是一个User类。 字段就是属性...

    公众号php_pachong
  • 微服务下配置管理中心 SCCA

    SCCA 全称 spring-cloud-config-admin,微服务下 Spring Boot 应用(包含 Spring Cloud)统一的配置管理平台。

    码农小胖哥
  • Spring Cloud Bus:消息总线

    我们通常会使用消息代理来构建一个主题,然后把微服务架构中的所有服务都连接到这个主题上去,当我们向该主题发送消息时,所有订阅该主题的服务都会收到消息并进行消费。使...

    macrozheng
  • 关于女神SQLite的疑惑(1)

    1. 答:对于这个问题,简短的回答是:任何一个被声明为 INTEGER PRIMARY KEY 的域都将是自动递增的。

    用户2617681
  • Windows Server 下 IIS 申请部署 Let’s Encrypt 证书实现 HTTPS

    在明月有关 Let's Encrypt 证书申请部署的文章里如:【Linux 下使用 acme.sh 申请和管理 Let’s Encrypt 证书】、【一年多 ...

    明月云服务

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动