jsp网站制作详细教程,广州工商学院官网,黔江网站建设,上海高端模板建站前言
npm run serve 和 npm run build 的差异
这里主要是从 vue-cli 的流程 来看一下 我们经常用到的这两个命令, 他到传递给 webpack 打包的时候, 的一个具体的差异, 大致是配置了那些东西?
经过了那些流程 ? vue-cli 的 vue-plugin 的加载
内置的 plugin 列表如下, 依次…前言
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 参数的文档 完
