57 npm run build 和 npm run serve 的差异

前言

npm run serve 和 npm run build 的差异

这里主要是从 vue-cli 的流程 来看一下 我们经常用到的这两个命令, 他到传递给 webpack 打包的时候, 的一个具体的差异, 大致是配置了那些东西?

经过了那些流程 ?

vue-cli 的 vue-plugin 的加载

内置的 plugin 列表如下, 依次对应于左边的 commands, config 中的各个 js

也是在这个流程中, npm run serve 和 npm run build 产生了一些配置上的差异 导致了一部分结果的差异

vue-cli 的 vue-plugin 的加载导致的差异

更友好的这个json, 可以通过 vue-cli-service inspect 进行查看, 增加 --mode 参数查看不同的环境, 这里是直接调试输出的

npm run serve 执行得到的 webpack 的配置如下

{
  "mode": "development",
  "context": "D:\\WebstormWorkStations\\hello-package",
  "devtool": "eval-cheap-module-source-map",
  "output": {
    "hashFunction": "xxhash64",
    "path": "D:\\WebstormWorkStations\\hello-package\\dist",
    "filename": "js/[name].js",
    "publicPath": "",
    "chunkFilename": "js/[name].js",
    "globalObject": "(typeof self !== 'undefined' ? self : this)"
  },
  "resolve": {
    "alias": {
      "@": "D:\\WebstormWorkStations\\hello-package\\src",
      "vue$": "vue/dist/vue.runtime.esm.js"
    },
    "extensions": [
      ".mjs",
      ".js",
      ".jsx",
      ".vue",
      ".json",
      ".wasm"
    ],
    "modules": [
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "resolveLoader": {
    "modules": [
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-plugin-babel\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\lib\\config\\vue-loader-v15-resolve-compat",
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "module": {
    "noParse": {},
    "rules": [
      {
        "test": {},
        "resolve": {
          "fullySpecified": false
        }
      },
      {
        "test": {},
        "use": [
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js",
            "options": {
              "compilerOptions": {
                "whitespace": "condense"
              }
            }
          }
        ]
      },
      {
        "test": {},
        "resourceQuery": {},
        "sideEffects": true
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "pug-plain-loader"
              }
            ]
          },
          {
            "use": [
              {
                "loader": "raw-loader"
              },
              {
                "loader": "pug-plain-loader"
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "type": "asset/resource",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "media/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "fonts/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "exclude": [
          null
        ],
        "use": [
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\babel-loader\\lib\\index.js",
            "options": {
              "cacheCompression": false,
              "cacheDirectory": "D:\\WebstormWorkStations\\hello-package\\node_modules\\.cache\\babel-loader",
              "cacheIdentifier": "66c7e3b9"
            }
          }
        ]
      }
    ]
  },
  "optimization": {
    "realContentHash": false,
    "splitChunks": {
      "cacheGroups": {
        "defaultVendors": {
          "name": "chunk-vendors",
          "test": {},
          "priority": -10,
          "chunks": "initial"
        },
        "common": {
          "name": "chunk-common",
          "minChunks": 2,
          "priority": -20,
          "chunks": "initial",
          "reuseExistingChunk": true
        }
      }
    },
    "minimizer": [
      {
        "options": {
          "test": {},
          "extractComments": false,
          "parallel": true,
          "minimizer": {
            "options": {
              "compress": {
                "arrows": false,
                "collapse_vars": false,
                "comparisons": false,
                "computed_props": false,
                "hoist_funs": false,
                "hoist_props": false,
                "hoist_vars": false,
                "inline": false,
                "loops": false,
                "negate_iife": false,
                "properties": false,
                "reduce_funcs": false,
                "reduce_vars": false,
                "switches": false,
                "toplevel": false,
                "typeofs": false,
                "booleans": true,
                "if_return": true,
                "sequences": true,
                "unused": true,
                "conditionals": true,
                "dead_code": true,
                "evaluate": true
              },
              "mangle": {
                "safari10": true
              }
            }
          }
        }
      }
    ]
  },
  "plugins": [
    {},
    {
      "definitions": {
        "process.env": {
          "NODE_ENV": "\"development\"",
          "BASE_URL": "\"\""
        }
      }
    },
    {
      "options": {},
      "logger": {},
      "pathCache": {},
      "fsOperations": 0,
      "primed": false
    },
    {
      "compilationSuccessInfo": {},
      "shouldClearConsole": true,
      "formatters": [
        null,
        null,
        null,
        null
      ],
      "transformers": [
        null,
        null,
        null,
        null
      ],
      "previousEndTimes": {}
    },
    {
      "userOptions": {
        "title": "hello-package",
        "scriptLoading": "defer",
        "template": "D:\\WebstormWorkStations\\hello-package\\public\\index.html"
      },
      "version": 5,
      "options": {
        "template": "D:\\WebstormWorkStations\\hello-package\\public\\index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": "head",
        "scriptLoading": "defer",
        "compile": true,
        "favicon": false,
        "minify": "auto",
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "hello-package",
        "xhtml": false
      }
    },
    {
      "patterns": [
        {
          "from": "D:\\WebstormWorkStations\\hello-package\\public",
          "to": "D:\\WebstormWorkStations\\hello-package\\dist",
          "toType": "dir",
          "noErrorOnMissing": true,
          "globOptions": {
            "ignore": [
              "**/.DS_Store",
              "D:/WebstormWorkStations/hello-package/public/index.html"
            ]
          },
          "info": {
            "minimized": true
          }
        }
      ],
      "options": {}
    },
    {
      "delegate": {
        "profile": false,
        "modulesCount": 5000,
        "dependenciesCount": 10000,
        "showEntries": false,
        "showModules": true,
        "showDependencies": false,
        "showActiveModules": false,
        "percentBy": "entries"
      }
    }
  ],
  "entry": {
    "app": [
      "./src/main.js"
    ]
  }
}

npm run build 执行得到的 webpack 配置如下

{
  "mode": "production",
  "context": "D:\\WebstormWorkStations\\hello-package",
  "devtool": false,
  "output": {
    "hashFunction": "xxhash64",
    "path": "D:\\WebstormWorkStations\\hello-package\\dist",
    "filename": "js/[name].[contenthash:8].js",
    "publicPath": "",
    "chunkFilename": "js/[name].[contenthash:8].js"
  },
  "resolve": {
    "alias": {
      "@": "D:\\WebstormWorkStations\\hello-package\\src",
      "vue$": "vue/dist/vue.runtime.esm.js"
    },
    "extensions": [
      ".mjs",
      ".js",
      ".jsx",
      ".vue",
      ".json",
      ".wasm"
    ],
    "modules": [
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "resolveLoader": {
    "modules": [
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-plugin-babel\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\lib\\config\\vue-loader-v15-resolve-compat",
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "module": {
    "noParse": {},
    "rules": [
      {
        "test": {},
        "resolve": {
          "fullySpecified": false
        }
      },
      {
        "test": {},
        "use": [
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js",
            "options": {
              "compilerOptions": {
                "whitespace": "condense"
              }
            }
          }
        ]
      },
      {
        "test": {},
        "resourceQuery": {},
        "sideEffects": true
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "pug-plain-loader"
              }
            ]
          },
          {
            "use": [
              {
                "loader": "raw-loader"
              },
              {
                "loader": "pug-plain-loader"
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "type": "asset/resource",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "media/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "fonts/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false,
                  "sassOptions": {
                    "indentedSyntax": true
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "less-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
                "options": {
                  "publicPath": "../"
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "stylus-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "exclude": [
          null
        ],
        "use": [
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\thread-loader\\dist\\cjs.js"
          },
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\babel-loader\\lib\\index.js",
            "options": {
              "cacheCompression": false,
              "cacheDirectory": "D:\\WebstormWorkStations\\hello-package\\node_modules\\.cache\\babel-loader",
              "cacheIdentifier": "47eee831"
            }
          }
        ]
      }
    ]
  },
  "optimization": {
    "realContentHash": false,
    "splitChunks": {
      "cacheGroups": {
        "defaultVendors": {
          "name": "chunk-vendors",
          "test": {},
          "priority": -10,
          "chunks": "initial"
        },
        "common": {
          "name": "chunk-common",
          "minChunks": 2,
          "priority": -20,
          "chunks": "initial",
          "reuseExistingChunk": true
        }
      }
    },
    "minimizer": [
      {
        "options": {
          "test": {},
          "extractComments": false,
          "parallel": true,
          "minimizer": {
            "options": {
              "compress": {
                "arrows": false,
                "collapse_vars": false,
                "comparisons": false,
                "computed_props": false,
                "hoist_funs": false,
                "hoist_props": false,
                "hoist_vars": false,
                "inline": false,
                "loops": false,
                "negate_iife": false,
                "properties": false,
                "reduce_funcs": false,
                "reduce_vars": false,
                "switches": false,
                "toplevel": false,
                "typeofs": false,
                "booleans": true,
                "if_return": true,
                "sequences": true,
                "unused": true,
                "conditionals": true,
                "dead_code": true,
                "evaluate": true
              },
              "mangle": {
                "safari10": true
              }
            }
          }
        }
      },
      {
        "options": {
          "test": {},
          "parallel": true,
          "minimizer": {
            "options": {
              "preset": [
                "default",
                {
                  "mergeLonghand": false,
                  "cssDeclarationSorter": false
                }
              ]
            }
          }
        }
      }
    ]
  },
  "plugins": [
    {},
    {
      "definitions": {
        "process.env": {
          "NODE_ENV": "\"production\"",
          "BASE_URL": "\"\""
        }
      }
    },
    {
      "options": {},
      "logger": {},
      "pathCache": {},
      "fsOperations": 0,
      "primed": false
    },
    {
      "compilationSuccessInfo": {},
      "shouldClearConsole": true,
      "formatters": [
        null,
        null,
        null,
        null
      ],
      "transformers": [
        null,
        null,
        null,
        null
      ],
      "previousEndTimes": {}
    },
    {
      "_sortedModulesCache": {},
      "options": {
        "filename": "css/[name].[contenthash:8].css",
        "ignoreOrder": false,
        "runtime": true,
        "chunkFilename": "css/[name].[contenthash:8].css"
      },
      "runtimeOptions": {
        "linkType": "text/css"
      }
    },
    {
      "userOptions": {
        "title": "hello-package",
        "scriptLoading": "defer",
        "template": "D:\\WebstormWorkStations\\hello-package\\public\\index.html"
      },
      "version": 5,
      "options": {
        "template": "D:\\WebstormWorkStations\\hello-package\\public\\index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": "head",
        "scriptLoading": "defer",
        "compile": true,
        "favicon": false,
        "minify": "auto",
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "hello-package",
        "xhtml": false
      }
    },
    {
      "patterns": [
        {
          "from": "D:\\WebstormWorkStations\\hello-package\\public",
          "to": "D:\\WebstormWorkStations\\hello-package\\dist",
          "toType": "dir",
          "noErrorOnMissing": true,
          "globOptions": {
            "ignore": [
              "**/.DS_Store",
              "D:/WebstormWorkStations/hello-package/public/index.html"
            ]
          },
          "info": {
            "minimized": true
          }
        }
      ],
      "options": {}
    }
  ],
  "entry": {
    "app": [
      "./src/main.js"
    ]
  }
}

我们这里 只是从最终的结果来查看差异, 具体的细节 请参见各个 vue-plugin 的具体的实现

devtool 的默认配置, output 的文件模板存在一些差异

这也就是为什么我们在 npm run serve 的调试中, 看到的各个文件直接是 app.js, src_HelloWorld_vue.js 等等

css 的加载的 loader 有一些差异, npm run serve 是使用 vue-style-loader

npm run build直接使用 mini-css-extract-plugins 最小化目标 css

这里的每一个 test 是表示对于一类模块的加载方式, 只是这里的 test 没有加载出来, 可以理解为这个 test 是一个正则, 总共有十几类, 比如对于 *.vue 文件这样处理方式, *.css 另外的处理方式, 细节 我们不用关心

optimization 里面 npm run build 多一个 minimizer 的流程

npm run serve 这边多一些 dev 模式下面的一些配置

关于 plugin 的差异, 这部分的差异也可以在 各个 vue 插件中查找

如下是 npm run serve 的 plugin 列表

如下是 npm run build 的 plugin 列表

比如之前曾经提到过的 CopyPlugin 的注册是在 app.js 中注册的

这个也曾经在 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin中提到

webpack 的其他上下文导致的差异

注意 这部分代码是在 webpack 里面, 不是在 vue-cli 中

比如, 我就听疑惑 npm run build 和 npm run serve 在哪里配置的一个最小化代码, 一个没有最小化代码? 这个问题 我找了很久, 最后终于找到了

在 webpack/lib/config.defaults.applyOptimizationDefaults 中, 一系列变量是 根据 isProduction 进行初始化的, 这就是为什么 npm run build 的流程中有 minimize 这一项

npm run serve 使用的内存文件系统, 而 npm run build 打包到磁盘的?

这个流程是由 npm run serve 这边的启动 devServer 的过程触发的

而 npm run build 这边和 devServer 没有关系, 因此 fs 是默认的 磁盘文件系统

具体的配置 outputFileSystem 到 context, compiler 的地方如下

然后可以看到, 这个 outputFileSystem 还是可以自己手动配置的, 扩展性相当强

npm run serve 如何将编译的结果写出到磁盘

其实偶尔也有 npm run servce 的时候, 查看一下具体文件的需求

免得 需要一个调试环境才能够运行时查看 memfs 的文件系统的具体的文件信息

这时候可以通过 devServer 下面的 devMiddleware 的配置进行配置, 增加了一个 writeToDisk 的选项, 这样的话 devServer 这边会将编译的结果, 也写出到内存文件系统, 然后也会写一份数据到磁盘, 服务本身的使用 还是使用 内存文件系统的数据

这里是通过 webpackDevMiddleware 这里进行关联的

这是一份编译完成之后的结果如下

另外可以通过 options.outputFileSystem 进行配置, 注意看下面 outputFileSystem 部分的配置

最终写出的文件信息如下

writeToDisk 参数的文档

outputFileSystem 参数的文档

相关推荐
还是大剑师兰特5 分钟前
面试题:ES6模块与CommonJS模块有什么异同?
前端·es6·大剑师
胡西风_foxww20 分钟前
【ES6复习笔记】数值扩展(16)
前端·笔记·es6·扩展·数值
mosen86822 分钟前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
白云~️22 分钟前
uniappX 移动端单行/多行文字隐藏显示省略号
开发语言·前端·javascript
沙尘暴炒饭24 分钟前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
昙鱼38 分钟前
springboot创建web项目
java·前端·spring boot·后端·spring·maven
田猿笔记43 分钟前
解决 Node.js 单线程限制的有效方法
node.js
天天进步201544 分钟前
Vue项目重构实践:如何构建可维护的企业级应用
前端·vue.js·重构
蟾宫曲1 小时前
Node.js 工具:在 Windows 11 中配置 Node.js 的详细步骤
windows·npm·node.js·前端工具
小华同学ai1 小时前
vue-office:Star 4.2k,款支持多种Office文件预览的Vue组件库,一站式Office文件预览方案,真心不错
前端·javascript·vue.js·开源·github·office