前言

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 参数的文档

 

 

完