vue-cli的webpack模板項(xiàng)目配置文件分析
由于最近在vue-cli生成的webpack模板項(xiàng)目的基礎(chǔ)上寫(xiě)一個(gè)小東西,開(kāi)發(fā)過(guò)程中需要改動(dòng)到build和config里面一些相關(guān)的配置,所以剛好趁此機(jī)會(huì)將所有配置文件看一遍,理一理思路,也便于以后修改配置的時(shí)候不會(huì)“太折騰”。
一、文件結(jié)構(gòu)
本文主要分析開(kāi)發(fā)(dev)和構(gòu)建(build)兩個(gè)過(guò)程涉及到的文件,故下面文件結(jié)構(gòu)僅列出相應(yīng)的內(nèi)容。
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack.prod.conf.js │ └─webpack.test.conf.js ├─config │ ├─dev.env.js │ ├─index.js │ ├─prod.env.js │ └─test.env.js ├─... └─package.json
二、指令分析
首先看package.json里面的scripts字段,
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" }
測(cè)試的東西先不看,直接看”dev”和”build”。運(yùn)行”npm run dev”的時(shí)候執(zhí)行的是build/dev-server.js文件,運(yùn)行”npm run build”的時(shí)候執(zhí)行的是build/build.js文件,我們可以從這兩個(gè)文件開(kāi)始進(jìn)行代碼閱讀分析。
三、build文件夾分析
build/dev-server.js
首先來(lái)看執(zhí)行”npm run dev”時(shí)候最先執(zhí)行的build/dev-server.js文件。該文件主要完成下面幾件事情:
- 檢查node和npm的版本
- 引入相關(guān)插件和配置
- 創(chuàng)建express服務(wù)器和webpack編譯器
- 配置開(kāi)發(fā)中間件(webpack-dev-middleware)和熱重載中間件(webpack-hot-middleware)
- 掛載服務(wù)和中間件
- 配置靜態(tài)資源
- 啟動(dòng)服務(wù)器特定端口(8080)
- 自動(dòng)打開(kāi)瀏覽器并打開(kāi)網(wǎng)址(localhost:8080)
說(shuō)明: express服務(wù)器提供靜態(tài)文件服務(wù),不過(guò)它還使用了http-proxy-middleware,一個(gè)http請(qǐng)求的中間件。前端開(kāi)發(fā)過(guò)程中需要使用到后臺(tái)的API的話(huà),可以通過(guò)配置proxyTable來(lái)將相應(yīng)的后臺(tái)請(qǐng)求到專(zhuān)用的API服務(wù)器。
詳情請(qǐng)看代碼注釋?zhuān)?/p>
// 檢查NodeJS和npm的版本 require('./check-versions')() // 獲取配置 var config = require('../config') // 如果Node的環(huán)境變量中沒(méi)有設(shè)置當(dāng)前的環(huán)境(NODE_ENV),則使用config中的配置作為當(dāng)前的環(huán)境 if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } // 一個(gè)可以調(diào)用默認(rèn)軟件打開(kāi)網(wǎng)址、圖片、文件等內(nèi)容的插件 // 這里用它來(lái)調(diào)用默認(rèn)瀏覽器打開(kāi)dev-server的端口,例如:localhost:8080 var opn = require('opn') var path = require('path') var express = require('express') var webpack = require('webpack') // 一個(gè)express中間件,用于將http請(qǐng)求代理到其他服務(wù)器 // 例:localhost:8080/api/xxx --> localhost:3000/api/xxx // 這里使用該插件可以將前端開(kāi)發(fā)中涉及到的請(qǐng)求代理到API服務(wù)器上,方便與服務(wù)器對(duì)接 var proxyMiddleware = require('http-proxy-middleware') // 根據(jù) Node 環(huán)境來(lái)引入相應(yīng)的 webpack 配置 var webpackConfig = process.env.NODE_ENV === 'testing' ? require('./webpack.prod.conf') : require('./webpack.dev.conf') // dev-server 端口,默認(rèn)為config.dev.port設(shè)置的端口,即8080 var port = process.env.PORT || config.dev.port // 用于判斷是否要自動(dòng)打開(kāi)瀏覽器的布爾變量,當(dāng)配置文件中沒(méi)有設(shè)置自動(dòng)打開(kāi)瀏覽器的時(shí)候其值為 false var autoOpenBrowser = !!config.dev.autoOpenBrowser // 定義 HTTP 代理表,代理到 API 服務(wù)器 var proxyTable = config.dev.proxyTable // 創(chuàng)建1個(gè) express 實(shí)例 var app = express() // 根據(jù)webpack配置文件創(chuàng)建Compiler對(duì)象 var compiler = webpack(webpackConfig) // webpack-dev-middleware使用compiler對(duì)象來(lái)對(duì)相應(yīng)的文件進(jìn)行編譯和綁定 // 編譯綁定后將得到的產(chǎn)物存放在內(nèi)存中而沒(méi)有寫(xiě)進(jìn)磁盤(pán) // 將這個(gè)中間件交給express使用之后即可訪(fǎng)問(wèn)這些編譯后的產(chǎn)品文件 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true }) // webpack-hot-middleware,用于實(shí)現(xiàn)熱重載功能的中間件 var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) // 當(dāng)html-webpack-plugin提交之后通過(guò)熱重載中間件發(fā)布重載動(dòng)作使得頁(yè)面重載 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // 將 proxyTable 中的代理請(qǐng)求配置掛在到express服務(wù)器上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options,例如將'www.example.com'變成{ target: 'www.example.com' } if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) // handle fallback for HTML5 history API // 重定向不存在的URL,常用于SPA app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 使用webpack開(kāi)發(fā)中間件 // 即將webpack編譯后輸出到內(nèi)存中的文件資源掛到express服務(wù)器上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 將熱重載中間件掛在到express服務(wù)器上 app.use(hotMiddleware) // serve pure static assets // 靜態(tài)資源的路徑 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 將靜態(tài)資源掛到express服務(wù)器上 app.use(staticPath, express.static('./static')) // 應(yīng)用的地址信息,例如:http://localhost:8080 var uri = 'http://localhost:' + port // webpack開(kāi)發(fā)中間件合法(valid)之后輸出提示語(yǔ)到控制臺(tái),表明服務(wù)器已啟動(dòng) devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') }) // 啟動(dòng)express服務(wù)器相應(yīng)的端口(8080) module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don't need open it // 如果符合自動(dòng)打開(kāi)瀏覽器的條件,則通過(guò)opn插件調(diào)用系統(tǒng)默認(rèn)瀏覽器打開(kāi)對(duì)應(yīng)的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })
build/webpack.base.conf.js
從代碼中看到,dev-server使用的webpack配置來(lái)自build/webpack.dev.conf.js文件(測(cè)試環(huán)境下使用的是build/webpack.prod.conf.js,這里暫時(shí)不考慮測(cè)試環(huán)境)。而build/webpack.dev.conf.js中又引用了webpack.base.conf.js,所以這里我先分析webpack.base.conf.js。
webpack.base.conf.js主要完成了下面這些事情:
- 配置webpack編譯入口
- 配置webpack輸出路徑和命名規(guī)則
- 配置模塊resolve規(guī)則
- 配置不同類(lèi)型模塊的處理規(guī)則
說(shuō)明: 這個(gè)配置里面只配置了.js、.vue、圖片、字體等幾類(lèi)文件的處理規(guī)則,如果需要處理其他文件可以在module.rules里面配置。
具體請(qǐng)看代碼注釋?zhuān)?/p>
var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') // 給出正確的絕對(duì)路徑 function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { // 配置webpack編譯入口 entry: { app: './src/main.js' }, // 配置webpack輸出路徑和命名規(guī)則 output: { // webpack輸出的目標(biāo)文件夾路徑(例如:/dist) path: config.build.assetsRoot, // webpack輸出bundle文件命名格式 filename: '[name].js', // webpack編譯輸出的發(fā)布路徑 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, // 配置模塊resolve的規(guī)則 resolve: { // 自動(dòng)resolve的擴(kuò)展名 extensions: ['.js', '.vue', '.json'], // resolve模塊的時(shí)候要搜索的文件夾 modules: [ resolve('src'), resolve('node_modules') ], // 創(chuàng)建路徑別名,有了別名之后引用模塊更方便,例如 // import Vue from 'vue/dist/vue.common.js'可以寫(xiě)成 import Vue from 'vue' alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components') } }, // 配置不同類(lèi)型模塊的處理規(guī)則 module: { rules: [ {// 對(duì)src和test文件夾下的.js和.vue文件使用eslint-loader test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: "pre", include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, {// 對(duì)所有.vue文件使用vue-loader test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, {// 對(duì)src和test文件夾下的.js文件使用babel-loader test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, {// 對(duì)圖片資源文件使用url-loader,query.name指明了輸出的命名規(guī)則 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, {// 對(duì)字體資源文件使用url-loader,query.name指明了輸出的命名規(guī)則 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }
build/webpack.dev.conf.js
接下來(lái)看webpack.dev.conf.js,這里面在webpack.base.conf的基礎(chǔ)上增加完善了開(kāi)發(fā)環(huán)境下面的配置,主要包括下面幾件事情:
- 將hot-reload相關(guān)的代碼添加到entry chunks
- 合并基礎(chǔ)的webpack配置
- 使用styleLoaders
- 配置Source Maps
- 配置webpack插件
詳情請(qǐng)看代碼注釋?zhuān)?/p>
var utils = require('./utils') var webpack = require('webpack') var config = require('../config') // 一個(gè)可以合并數(shù)組和對(duì)象的插件 var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') // 一個(gè)用于生成HTML文件并自動(dòng)注入依賴(lài)文件(link/script)的webpack插件 var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于更友好地輸出webpack的警告、錯(cuò)誤等信息 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) // 合并基礎(chǔ)的webpack配置 module.exports = merge(baseWebpackConfig, { // 配置樣式文件的處理規(guī)則,使用styleLoaders module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // 配置Source Maps。在開(kāi)發(fā)中使用cheap-module-eval-source-map更快 devtool: '#cheap-module-eval-source-map', // 配置webpack插件 plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), // 后頁(yè)面中的報(bào)錯(cuò)不會(huì)阻塞,但是會(huì)在編譯結(jié)束后報(bào)錯(cuò) new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), new FriendlyErrorsPlugin() ] })
build/utils.js和build/vue-loader.conf.js
前面的webpack配置文件中使用到了utils.js和vue-loader.conf.js這兩個(gè)文件,utils主要完成下面3件事:
- 配置靜態(tài)資源路徑
- 生成cssLoaders用于加載.vue文件中的樣式
- 生成styleLoaders用于加載不在.vue文件中的單獨(dú)存在的樣式文件
vue-loader.conf則只配置了css加載器以及編譯css之后自動(dòng)添加前綴。詳情請(qǐng)看代碼注釋?zhuān)ㄏ旅媸莢ue-loader.conf的代碼,utils代碼里面原有的注釋已經(jīng)有相應(yīng)說(shuō)明這里就不貼出來(lái)了):
var utils = require('./utils') var config = require('../config') var isProduction = process.env.NODE_ENV === 'production' module.exports = { // css加載器 loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), // 編譯css之后自動(dòng)添加前綴 postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] }
build/build.js
講完了開(kāi)發(fā)環(huán)境下的配置,下面開(kāi)始來(lái)看構(gòu)建環(huán)境下的配置。執(zhí)行”npm run build”的時(shí)候首先執(zhí)行的是build/build.js文件,build.js主要完成下面幾件事:
- loading動(dòng)畫(huà)
- 刪除創(chuàng)建目標(biāo)文件夾
- webpack編譯
- 輸出信息
說(shuō)明: webpack編譯之后會(huì)輸出到配置里面指定的目標(biāo)文件夾;刪除目標(biāo)文件夾之后再創(chuàng)建是為了去除舊的內(nèi)容,以免產(chǎn)生不可預(yù)測(cè)的影響。
詳情請(qǐng)看代碼注釋?zhuān)?/p>
// https://github.com/shelljs/shelljs // 檢查NodeJS和npm的版本 require('./check-versions')() process.env.NODE_ENV = 'production' // Elegant terminal spinner var ora = require('ora') var path = require('path') // 用于在控制臺(tái)輸出帶顏色字體的插件 var chalk = require('chalk') // 執(zhí)行Unix命令行的插件 var shell = require('shelljs') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production...') spinner.start() // 開(kāi)啟loading動(dòng)畫(huà) // 輸出文件的目標(biāo)文件夾 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) // 遞歸刪除舊的目標(biāo)文件夾 shell.rm('-rf', assetsPath) // 重新創(chuàng)建文件夾 shell.mkdir('-p', assetsPath) shell.config.silent = true // 將static文件夾復(fù)制到輸出的目標(biāo)文件夾 shell.cp('-R', 'static/*', assetsPath) shell.config.silent = false // webpack編譯 webpack(webpackConfig, function (err, stats) { spinner.stop() // 停止loading動(dòng)畫(huà) if (err) throw err // 沒(méi)有出錯(cuò)則輸出相關(guān)信息 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) })
build/webpack.prod.conf.js
構(gòu)建的時(shí)候用到的webpack配置來(lái)自webpack.prod.conf.js,該配置同樣是在webpack.base.conf基礎(chǔ)上的進(jìn)一步完善。主要完成下面幾件事情:
- 合并基礎(chǔ)的webpack配置
- 使用styleLoaders
- 配置webpack的輸出
- 配置webpack插件
- gzip模式下的webpack插件配置
- webpack-bundle分析
說(shuō)明: webpack插件里面多了壓縮代碼以及抽離css文件等插件。
詳情請(qǐng)看代碼:
var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于從webpack生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css,js文件將其與webpack輸出的bundle分離 var ExtractTextPlugin = require('extract-text-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env // 合并基礎(chǔ)的webpack配置 var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, // 配置webpack的輸出 output: { // 編譯輸出目錄 path: config.build.assetsRoot, // 編譯輸出文件名格式 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 沒(méi)有指定輸出名的文件輸出的文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, // 配置webpack插件 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), // 壓縮代碼 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // 抽離css文件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] }) // gzip模式下需要引入compression插件進(jìn)行壓縮 if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
build/check-versions.js和build/dev-client.js
最后是build文件夾下面兩個(gè)比較簡(jiǎn)單的文件,dev-client.js似乎沒(méi)有使用到,代碼也比較簡(jiǎn)單,這里不多講。check-version.js完成對(duì)node和npm的版本檢測(cè),下面是其代碼注釋?zhuān)?/p>
// 用于在控制臺(tái)輸出帶顏色字體的插件 var chalk = require('chalk') // 語(yǔ)義化版本檢查插件(The semantic version parser used by npm) var semver = require('semver') // 引入package.json var packageConfig = require('../package.json') // 開(kāi)辟子進(jìn)程執(zhí)行指令cmd并返回結(jié)果 function exec (cmd) { return require('child_process').execSync(cmd).toString().trim() } // node和npm版本需求 var versionRequirements = [ { name: 'node', currentVersion: semver.clean(process.version), versionRequirement: packageConfig.engines.node }, { name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm } ] module.exports = function () { var warnings = [] // 依次判斷版本是否符合要求 for (var i = 0; i < versionRequirements.length; i++) { var mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } } // 如果有警告則將其輸出到控制臺(tái) if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log() for (var i = 0; i < warnings.length; i++) { var warning = warnings[i] console.log(' ' + warning) } console.log() process.exit(1) } }
四、config文件夾分析
config/index.js
config文件夾下最主要的文件就是index.js了,在這里面描述了開(kāi)發(fā)和構(gòu)建兩種環(huán)境下的配置,前面的build文件夾下也有不少文件引用了index.js里面的配置。下面是代碼注釋?zhuān)?/p>
// see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { // 構(gòu)建產(chǎn)品時(shí)使用的配置 build: { // webpack的編譯環(huán)境 env: require('./prod.env'), // 編譯輸入的index.html文件 index: path.resolve(__dirname, '../dist/index.html'), // webpack輸出的目標(biāo)文件夾路徑 assetsRoot: path.resolve(__dirname, '../dist'), // webpack編譯輸出的二級(jí)文件夾 assetsSubDirectory: 'static', // webpack編譯輸出的發(fā)布路徑 assetsPublicPath: '/', // 使用SourceMap productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 默認(rèn)不打開(kāi)開(kāi)啟gzip模式 productionGzip: false, // gzip模式下需要壓縮的文件的擴(kuò)展名 productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, // 開(kāi)發(fā)過(guò)程中使用的配置 dev: { // webpack的編譯環(huán)境 env: require('./dev.env'), // dev-server的端口 port: 8080, // 啟動(dòng)dev-server之后自動(dòng)打開(kāi)瀏覽器 autoOpenBrowser: true, // webpack編譯輸出的二級(jí)文件夾 assetsSubDirectory: 'static', // webpack編譯輸出的發(fā)布路徑 assetsPublicPath: '/', // 請(qǐng)求代理表,在這里可以配置特定的請(qǐng)求代理到對(duì)應(yīng)的API接口 // 例如將'/api/xxx'代理到'www.example.com/api/xxx' proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. // 是否開(kāi)啟 cssSourceMap cssSourceMap: false } }
config/dev.env.js、config/prod.env.js和config/test.env.js
這三個(gè)文件就簡(jiǎn)單設(shè)置了環(huán)境變量而已,沒(méi)什么特別的。
五、總結(jié)
到這里對(duì)模板項(xiàng)目的build和config文件夾下面的內(nèi)容已經(jīng)基本了解,知道了在實(shí)際使用中根據(jù)自己的需求修改哪里的配置,例如,當(dāng)我有需要配置的時(shí)候要在config/index.js里面的dev.proxyTable設(shè)置,當(dāng)我修改了資源文件夾名稱(chēng)static同樣需要在config/index.js里面設(shè)置??傮w感覺(jué)入門(mén)了webpack,但不算真正理解。webpack的插件好多,在看代碼的過(guò)程中遇到不認(rèn)識(shí)的插件都是要去查看很多文檔(github,npm或者博客),感覺(jué)實(shí)際過(guò)程中更改插件配置或者使用新插件也是需要費(fèi)點(diǎn)心思鉆文檔和網(wǎng)上其他博客介紹。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
關(guān)于Vue組件庫(kù)開(kāi)發(fā)詳析
這篇文章主要給大家介紹了關(guān)于Vue組件庫(kù)開(kāi)發(fā)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07vue和element上傳圖片以及進(jìn)行拖拽圖片排序問(wèn)題
這篇文章主要介紹了vue和element上傳圖片以及進(jìn)行拖拽圖片排序問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫(kù)的使用方法和主要功能,最后通過(guò)Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能2024-10-10如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶(hù)的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫(kù)實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10vue?調(diào)用瀏覽器攝像頭實(shí)現(xiàn)及原理解析
這篇文章主要為大家介紹了vue調(diào)用瀏覽器攝像頭實(shí)現(xiàn)及原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06詳解Vue實(shí)現(xiàn)鏈接生成二維碼并支持下載
在現(xiàn)代 Web 應(yīng)用中,快速分享鏈接是一項(xiàng)常見(jiàn)需求,二維碼作為一種簡(jiǎn)潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術(shù)實(shí)現(xiàn)動(dòng)態(tài)生成鏈接二維碼的方法,需要的可以參考下2024-03-03