前言
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 参数的文档
完
 ? require('@/assets/image/avatar.png') : item.avatar){kind=avatar}
