vue-cli 中npm run dev 执行的操作_vue cli启动指定页面-优快云博客

本文链接：https://blog.youkuaiyun.com/Master12138/article/details/109385958

/*
* webpack-dev-server shell脚本 找到node执行webpck-dev-server.js文件
* --inline 启用内联模式:处理实时重载的脚本被插入到包中，并且构建信息将会
* 出现在浏览器控制台;
* --inline=false 启用iframe模式:在页面中嵌入iframe，将应用注入iframe
* 中，访问路径修改为/webpack-dev-server/index.html可以看到页面头部出现
* 提示框，用于显示构建过程的状态信息;
* --progress 将运行进度输出到控制台;
* --config webpack默认使用webpack.config.js配置文件，使用--config可以
* 指定配置文件;
* 
*/
...
scripts:{
	"dev":"webpack-dev-server --inline --progress 
	--config build/webpack.dev.conf.js"
	...
}
...

webpack.dev.conf.js

'use strict'
//引入utils.js文件
const utils = require('./utils')
//引入webpack.js文件
const webpack = require('webpack')
// 引入config/index.js文件
const config = require('../config')
// 引入webpack-merge合并配置文件，webpack-merge合并配置文件时，允许链接数组并合并对象，而不是覆盖组合
const merge = require('webpack-merge')
// 引入nodejs的path模块
const path = require('path')
//引入webpack.base.conf.js文件，文件中设置了基础的context、entry、module和node
const baseWebpackConfig = require('./webpack.base.conf')
//webpack拷贝插件，将文件拷贝到指定的目标文件夹
const CopyWebpackPlugin = require('copy-webpack-plugin')
//用于创建一个在body中使用script包含了所有webpack包的HTML5文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//识别某些级别的webpack错误，并处理，聚合优先级
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 自动获取可用端口
const portfinder = require('portfinder')
//process node的一个全局对象用于获取当前程序的环境变量
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
//开发环境下的webpack config
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    //获取样式的loaders配置
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    //使用内联模式时，在开发工具的控制台中显示消息
    clientLogLevel: 'warning',
    //当使用HTML5 history API时，任意404响应都可能需要被替代为index.html
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    //启动热替换
    hot: true,
    /*
    * 当需要静态文件时，告诉服务器从哪里提供内容。devServer.publicPath将用于确定
    * 应该从哪里提供bundle，并且此选项优先
    * 默认情况下，将使用当前工作目录作为提供内容的目录，但是可以修改其他目录
    */
    contentBase: false, // since we use CopyWebpackPlugin.
    //所有服务启用gzip压缩
    compress: true,
    //指定使用host
    host: HOST || config.dev.host,
    //指定使用port
    port: PORT || config.dev.port,
    //是否打开浏览器
    open: config.dev.autoOpenBrowser,
    /*当编译器出现错误和警告时，是否在浏览器中全屏覆盖显示。默认禁用
    * true 只展示错误
    * { warnings: true, errors: true } 展示警告和错误
    * */
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    //设置打包文件存放的目录
    publicPath: config.dev.assetsPublicPath,
    //代理某些URL，便于在同域名下发送API请求
    proxy: config.dev.proxyTable,
    //只在控制台打印初始启动信息
    quiet: true, // necessary for FriendlyErrorsPlugin
    //监控文件的配置项
    watchOptions: {
      //设置轮询文件的时间
      poll: config.dev.poll,
    }
  },
  plugins: [
    //创建一个在编译时可以配置的全局变量
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    //启动模块热替换插件(HMR)
    new webpack.HotModuleReplacementPlugin(),
    //开启HMR的时候使用该插件会显示模块的相对路径
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    //在编辑出现错误时，使用此插件跳过输出阶段，保证输出资源不会包含错误
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    //用于创建一个HTML文件
    new HtmlWebpackPlugin({
      //指定HTML写入的文件，默认为index.html
      filename: 'index.html',
      //webpack模板文件的相对或绝对路径，默认情况下，将使用src/index.html（如果存在）
      template: 'index.html',
      /*设置将JavaScript资源的放置位置
      * true或者body时，所有的资源都放在body元素的底部
      * head将资源放置在head元素中
      * false 所有静态资源都不会注入到模板文件中
      * */
      inject: true
    }),
    // copy custom static assets
    /*
    *拷贝文件到指定文件夹下
    * from 定义要拷贝的文件
    * to 定义要拷贝到的目标文件夹
    * ignore 忽略拷贝指定的文件
    * */
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

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: {
          //运行成功时显示的信息
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        //运行错误的配置
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})