從零構建vue項目(二)--vue-cli2項目結構解析
此處總結的兩位前輩的文章, 是去年作的當作筆記本身看的, 一直沒發佈沒有記到來源QAQjavascript
l package.json: 基於node的項目包配置文件(工具,命令什麼的)(也是cnpm install配置的依據)php
{// 從name到private是所搭建的項目描述
"name": "travel", // 項目名稱: 不能以.或者_開頭, 不能包含大寫字母, 含義明確且不能與現有項目重複
"version": "1.0.0", // 項目版本號: 遵循"大版本.次要版本.小版本"
"description": "A Vue.js project", // 項目描述
"author": "huan.m", // 做者名字
"private": true, // 是否私有
// scripts中的子項是配置npm run要執行的命令, 便是咱們在控制檯運行的腳本的縮寫
"scripts": {
"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",
// "dev": 運行項目的命令,若是沒有配置這個命令, 則不能使用命令npm run dev, 其中:
// webpack-dev-server: 啓用一個小型的Node.js Express的Http服務器,實現實時編譯,實時編譯的文件在內存中,並無輸出到編譯文件中.
// --inline:
// inline模式: 將webpack-dev-server的客戶端入口添加到包(bundle.js)中輸入, 在webpack.config.js 的入口配置文件中再添加一個入口webpack-dev-server/client?http://localhost:8080/, 訪問路徑爲localhost:8080/index.html
// iframe模式: 頁面放在iframe中, 當修改文件後重載,即iframe進行了reload
// --progress 運行/打包的時候能夠看到進度
// --progress後面配置-port 9089 更改端口號,1~1024是爲系統保留的不可用. 範圍:0-65535
// --open 自動打開默認瀏覽器, 若是配置瀏覽器名稱例: --open ‘Google Chorme’ 則指定打開的瀏覽器.
// --host 改主機(--host 0.0.0.0), 用本身電腦的ip地址啓動, ip地址標識計算機, port標識軟件.
"start": "npm run dev", // 運行開發環境, 若是沒有配置這個命令, 則不能使用命令 npm run start
"lint": "eslint --ext .js,.vue src", // 基本語法驗證,--ext用來指定檢測的文件格式, 經過 npm run lint來檢測項目中的warning 和 error了。
"unit": "jest --config test/unit/jest.conf.js --coverage", // 執行單元測試的命令
"e2e": "node test/e2e/runner.js", // e2e測試
"test": "npm run unit && npm run e2e", // 執行單元測試的命令和e2e測試
"build": "node build/build.js" // 使用node運行build文件,進行項目打包
},
// dependencies: 項目運行所依賴的庫文件.
// 下載依賴使用npm i/install lib@version --save(或者-S), 或者yarn add lib@version. 不寫版本號則默認下載最新版.下載安裝在node-modules中
// --save會配置到"dependencies"中
// 打包的時候將會把用到的文件抽取出來打包
"dependencies": {
"axios": "^0.18.0",
"better-scroll": "^1.11.0",
"fastclick": "^1.0.6",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.5.2",
"vue-awesome-swiper": "2.6.7",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
//devDependencies: 項目開發時所要用到的工具庫,打包上線時不須要.若是要下載本身的工具，則經過 cnpm install tool@version --save-dev, 若是不寫版本號,默認下載最新的版本.
"devDependencies": {
"autoprefixer": "^7.1.2", // autoprefixer做爲postcss插件用來解析CSS補充前綴，例如 display: flex會補充爲display:-webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex。
// babel:如下幾個babel開頭的都是針對es6解析的插件。用最新標準編寫的 JavaScript 代碼向下編譯成能夠在今天隨處可用的版本
"babel-core": "^6.22.1", // babel的核心，把 js 代碼分析成 ast ，方便各個插件分析語法進行相應的處理。
"babel-helper-vue-jsx-merge-props": "^2.0.3", // 預製babel-template函數，提供給vue,jsx等使用
"babel-loader": "^7.1.1", // 使項目運行使用Babel和webpack來傳輸js文件，使用babel-core提供的api進行轉譯
"babel-plugin-syntax-jsx": "^6.18.0", // 支持jsx
"babel-plugin-transform-runtime": "^6.22.0", // 避免編譯輸出中的重複，直接編譯到build環境中
"babel-plugin-transform-vue-jsx": "^3.5.0", // babel轉譯過程當中使用到的插件，避免重複
"babel-preset-env": "^1.3.2", // 轉爲es5，transform階段使用到的插件之一
"babel-preset-stage-2": "^6.22.0", // ECMAScript第二階段的規範
"chalk": "^2.0.1", // 用來在命令行輸出不一樣顏色文字
"copy-webpack-plugin": "^4.0.1", // 拷貝資源和文件
"css-loader": "^0.28.0", // webpack先用css-loader加載器去解析後綴爲css的文件，再使用style-loader生成一個內容爲最終解析完的css代碼的style標籤，放到head標籤裏
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0", // 將一個以上的包裏面的文本提取到單獨文件中
"file-loader": "^1.1.4", // ③打包壓縮文件，與url-loader用法相似
"friendly-errors-webpack-plugin": "^1.6.1", // 識別某些類別的WebPACK錯誤和清理，聚合和優先排序，以提供更好的開發經驗
"html-webpack-plugin": "^2.30.1", // 簡化了HTML文件的建立，引入了外部資源，建立html的入口文件，可經過此項進行多頁面的配置
"node-notifier": "^5.1.2", // 支持使用node發送跨平臺的本地通知
"optimize-css-assets-webpack-plugin": "^3.2.0", // 壓縮提取出的css，並解決ExtractTextPlugin分離出的js重複問題(多個文件引入同一css文件)
"ora": "^1.2.0", // 加載（loading）的插件
"portfinder": "^1.0.13", // 查看進程端口
"postcss-import": "^11.0.0", // 能夠消耗本地文件、節點模塊或web_modules
"postcss-loader": "^2.0.8", // 用來兼容css的插件
"postcss-url": "^7.2.1", // URL上從新定位、內聯或複製
"rimraf": "^2.6.0", // 節點的UNIX命令RM—RF,強制刪除文件或者目錄的命令
"semver": "^5.3.0", // 用來對特定的版本號作判斷的
"shelljs": "^0.7.6", // 使用它來消除shell腳本在UNIX上的依賴性，同時仍然保留其熟悉和強大的命令，便可執行Unix系統命令
"uglifyjs-webpack-plugin": "^1.1.1", // 壓縮js文件
"url-loader": "^0.5.8",//壓縮文件，可將圖片轉化爲base64
"vue-loader": "^13.3.0", // VUE單文件組件的WebPACK加載器
"vue-style-loader": "^3.0.1", // 相似於樣式加載程序，您能夠在CSS加載器以後將其連接，以將CSS動態地注入到文檔中做爲樣式標籤
"vue-template-compiler": "^2.5.2", // 這個包能夠用來預編譯VUE模板到渲染函數，以免運行時編譯開銷和CSP限制
"webpack": "^3.6.0", // 核心,打包工具
"webpack-bundle-analyzer": "^2.9.0", // 可視化webpack輸出文件的大小
"webpack-dev-server": "^2.9.1", // 提供一個提供實時重載的開發服務器
"webpack-merge": "^4.1.0" // 它將數組和合並對象建立一個新對象。若是遇到函數，它將執行它們，經過算法運行結果，而後再次將返回的值封裝在函數中
},
// engines是引擎，指定node和npm版本
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
// 限制了瀏覽器或者客戶端須要什麼版本纔可運行
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
devDependencies和dependencies的區別：
devDependencies裏面的插件只用於開發環境，不用於生產環境，即輔助做用，打包的時候須要，打包完成就不須要了。而dependencies是須要發佈到生產環境的，自始至終都在。好比wepack等只是在開發中使用的包就寫入到devDependencies，而像vue這種項目全程依賴的包要寫入到dependencies
file-loader和url-loader的區別：
以圖片爲例，file-loader可對圖片進行壓縮，可是仍是經過文件路徑進行引入，當http請求增多時會下降頁面性能，而url-loader經過設定limit參數，小於limit字節的圖片會被轉成base64的文件，大於limit字節的將進行圖片壓縮的操做。總而言之，url-loader是file-loader的上層封裝。
l build 開發及發佈環境(生產環境)的配置文件,不要輕易去改css
n build.jshtml
構建環境下的配置，執行」npm run build」的時候首先執行的是build/build.js文件，build.js主要完成下面幾件事。
1. 進行node和npm的版本檢查
2. 打包時產生loading動畫
3. 刪除目標文件夾
4. 輸出打包信息 vue
'use strict' require('./check-versions')() // check-versions：調用檢查版本的文件,進行npm和node版本檢查。加（）表明直接調用該函數 process.env.NODE_ENV = 'production' // 當前node的環境變量設置爲production //下面定義常量引入插件 const ora = require('ora') // cnpm run build顯示的進度條 https://www.npmjs.com/package/ora const rm = require('rimraf') // 用於刪除文件或者文件夾的插件 https://www.npmjs.com/package/rimraf const path = require('path') // node.js的文件路徑，用來處理文件當中的路徑問題 const chalk = require('chalk') // chalk插件，他的做用是在控制檯中輸出不一樣的顏色的字，大體這樣用chalk.blue('Hello world')，這款插件只能改變命令行中的字體顏色 https://www.npmjs.com/package/chalk const webpack = require('webpack') // 引入webpack模塊 const config = require('../config') //引入config中的index.js文件 const webpackConfig = require('./webpack.prod.conf') // 引入webpack生產環境配置 const spinner = ora('building for production...') // 填寫打包時所顯示的提示信息 spinner.start() //調用start的方法實現加載動畫，優化用戶體驗 //先刪除dist文件再生成新文件，由於有時候會使用hash來命名，刪除整個文件可避免冗餘 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { // node.js將文件目錄拼接起來，默認是/dist/static if (err) throw err webpack(webpackConfig, (err, stats) => { spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. chunks: false, chunkModules: false }) + '\n\n') // process.stdout.write這一串是控制打包後詳細文件的輸出狀況 if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } // 打包失敗，顯示錯誤信息，並退出程序 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' )) // 打包成功在控制檯上顯示打包成功提示信息 }) })
n
check-version.js 若要執行build.js構建打包文件，必須先進行npm和node版本的檢測。
1.進行npm、node版本檢查(版本不相對時，會出現沒法打包，某些文件沒法正常編譯運行的狀況) html5
'use strict' const chalk = require('chalk') // chalk插件，他的做用是在控制檯中輸出不一樣的顏色的字，大體這樣用chalk.blue('Hello world')，這款插件只能改變命令行中的字體顏色 // 傳送門:https://github.com/chalk/chalk const semver = require('semver') // npm版本號的檢查 https://www.npmjs.com/package/semver const packageConfig = require('../package.json') // 引入包的json文件 const shell = require('shelljs') // shelljs插件，做用是用來執行Unix系統命 function exec (cmd) { // 返回經過child_process模塊的新建子進程，執行 Unix 系統命令後轉成沒有空格的字符串 return require('child_process').execSync(cmd).toString().trim() } //腳本能夠經過child_process 模塊新建子進程，從而執行 Unix 系統命令 //這段代碼實際就是把cmd這個參數傳遞的值轉化成先後沒有空格的字符串，也就是版本號 const versionRequirements = [ { name: 'node', currentVersion: semver.clean(process.version), // // 當前node版本信息 versionRequirement: packageConfig.engines.node // 獲取package.json中設置的node版本 } ] // 檢查node版本信息。 // 一:使用semver插件把版本信息轉化成規定格式，也就是 ' =v1.2.3 ' -> '1.2.3' 這種功能 // 二:這是規定的pakage.json中engines選項的node版本信息 "node":">= 4.0.0" if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), // 自動調用npm --version命令，而且把參數返回給exec函數，從而獲取純淨的版本號 versionRequirement: packageConfig.engines.npm // 規定要求的npm版本信息 }) } // 檢查npm版本信息 // 一:自動調用npm --version命令，而且把參數返回給exec函數，從而獲取純淨的版本號 // 二:這是規定的pakage.json中engines選項的node版本信息 "npm": ">= 3.0.0" module.exports = function () { const warnings = [] for (let i = 0; i < versionRequirements.length; i++) { const mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { // 上面這個判斷就是若是版本號不符合package.json文件中指定的版本號，就執行下面錯誤提示的代碼 warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } } // 進行版本檢查，這裏主要用到semver的模塊,semver.satisfies(version,range),若是版本不在這個範圍內，則進行報錯 // range eg: // ^1.2.3 ：= >=1.2.3 <2.0.0 // ^0.2.3 ：= >=0.2.3 <0.3.0 // ^0.0.3 ：= >=0.0.3 <0.0.4 if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log() for (let i = 0; i < warnings.length; i++) { const warning = warnings[i] console.log(' ' + warning) } console.log() process.exit(1) // 可否正常的運行dev-server // 傳送門：http://javascript.ruanyifeng.com/nodejs/process.html#toc9 // process.exit方法用來退出當前進程。它能夠接受一個數值參數，若是參數大於0，表示執行失敗；若是等於0表示執行成功。 } }
n utils.jsjava
utils提供工具函數，包括生成處理各類樣式語言的loader，獲取資源文件存放路徑的工具函數。
１. 計算資源文件存放路徑
2. 生成cssLoaders用於加載.vue文件中的樣式
3. 生成styleLoaders用於加載不在.vue文件中的單獨存在的樣式文件
4. 處理程序在編譯過程當中出現的錯誤，並在桌面進行錯誤信息的提示 node
'use strict' const path = require('path') // node.js的文件路徑，用來處理文件當中的路徑問題 // 傳送門:http://www.jianshu.com/p/fe41ee02efc8 const config = require('../config') // 引入config中的index.js文件 const ExtractTextPlugin = require('extract-text-webpack-plugin') // extract-text-webpack-plugin能夠提取bundle中的特定文本，將提取後的文本單獨存放到另外的文件 // 傳送門:https://webpack.js.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx const packageConfig = require('../package.json') // 引入包的json文件 //導出文件的位置，根據環境判斷開發環境和生產環境，爲config文件中index.js文件中定義的build.assetsSubDirectory或dev.assetsSubDirectory exports.assetsPath = function (_path) { const assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory //Node.js path 模塊提供了一些用於處理文件路徑的小工具 https://nodejs.org/api/path.html#path_path_posix //path.posix：提供對路徑方法的POSIX（可移植性操做系統接口）特定實現的訪問，便可跨平臺，區別於win32。 //path.join：用於鏈接路徑，會正確使用當前系統的路徑分隔符，Unix系統是"/"，Windows系統是"" return path.posix.join(assetsSubDirectory, _path) } // 資源存放的路徑，區別在於生產環境和開發環境 exports.cssLoaders = function (options) { options = options || {} //使用了css-loader和postcssLoader，經過options.usePostCSS屬性來判斷是否使用postcssLoader中壓縮等方法 const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap // 是否使用sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap // 是否使用sourceMap,postcss-loader用來解決各瀏覽器的前綴問題 // 傳送門:https://webpack.js.org/loaders/css-loader/#src/components/Sidebar/Sidebar.jsx } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] // 判斷將cssLoader和postcssLoader推入loaders數組 if (loader) { loaders.push({ loader: loader + '-loader', //Object.assign是es6語法的淺複製，後二者合併後複製完成賦值 options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // 處理各類各樣的loader,而且將各類各樣的loader推入loaders數組當中去 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { //ExtractTextPlugin可提取出文本，表明首先使用上面處理的loaders，當未能正確引入時使用vue-style-loader return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) //若是options.extract存在,則用extract-text-plugin提取樣式 } else { // 返回vue-style-loader鏈接loaders的最終值 return ['vue-style-loader'].concat(loaders) // 無需提取樣式則簡單使用vue-style-loader配合各類樣式loader去處理vue當中的<style>裏面的樣式 // 傳送門:https://vue-loader.vuejs.org/en/configurations/extract-css.html } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), // 須要css-loader 和 vue-style-loader postcss: generateLoaders(), // 須要css-loader和postcssLoader 和 vue-style-loader less: generateLoaders('less'), // 須要less-loader 和 vue-style-loader sass: generateLoaders('sass', { indentedSyntax: true }), // 須要sass-loader 和 vue-style-loader scss: generateLoaders('sass'), // 須要sass-loader 和 vue-style-loader stylus: generateLoaders('stylus'), // 須要stylus-loader 和 vue-style-loader styl: generateLoaders('stylus') // 須要stylus-loader 和 vue-style-loader } } // cssLoaders將各類loader 轉成對象形式以便styleLoaders進行處理 // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { const output = [] const loaders = exports.cssLoaders(options) // 調用cssLoaders方法 // 這時的usePostCSS存在 for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output // styleLoaders進行再加工處理 // 將各類css,less,sass等綜合在一塊兒得出結果輸出output } exports.createNotifierCallback = () => { //發送跨平臺通知系統 const notifier = require('node-notifier') return (severity, errors) => { if (severity !== 'error') return //當報錯時輸出錯誤信息的標題，錯誤信息詳情，副標題以及圖標 const error = errors[0] // 每次捕獲第一個錯誤 const filename = error.file && error.file.split('!').pop() // 錯誤文件的名稱所在位置 notifier.notify({ title: packageConfig.name, // 錯誤提示項目名字 message: severity + ': ' + error.name, // 錯誤提示類型 subtitle: filename || '', // 錯誤提示副標題 icon: path.join(__dirname, 'logo.png') // 錯誤提示圖示標 }) } } // 引入node-notifier模塊，這個模塊是用來在桌面窗口提示信息，若是想要關閉直接return掉或者在webpack.dev.conf.js中關掉 // 傳送門:https://www.npmjs.com/package/node-notifier
n vue-loader.conf.jsreact
該文件的主要做用就是處理.vue文件，解析這個文件中的每一個語言塊（template、script、style),轉換成js可用的js模塊。
1. 配置vue-loader，將一些碰見的文件轉換成可供webpack進行模塊化處理。webpack
'use strict' const utils = require('./utils') // 引入utils.js相關模塊 const config = require('../config') // 默認是index.js文件 const isProduction = process.env.NODE_ENV === 'production' //判斷是否爲生產環境 const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap //處理項目中的css文件，生產環境和測試環境默認是打開sourceMap，而extract中的提取樣式到單獨文件只有在生產環境中才須要 module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction // 是否將樣式提取到單獨的文件 }), cssSourceMap: sourceMapEnabled, // 是否開啓cssSourceMap, 關閉能夠避免 css-loader 的 some relative path related bugs 同時能夠加快構建速度。 // 傳送門:https://vue-loader.vuejs.org/zh-cn/options.html#csssourcemap cacheBusting: config.dev.cacheBusting, // 是否經過將哈希查詢附加到文件名來生成具備緩存清除的源映射[疑問，求解] // 傳送門:https://vue-loader.vuejs.org/en/options.html#cachebusting // 在模版編譯過程當中，編譯器能夠將某些屬性，如 src 路徑，轉換爲require調用，以便目標資源能夠由 webpack 處理. transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } }
n webpack.base.conf.js
webpack.base.conf.js主要完成了下面這些事件:
１.配置webpack編譯入口
2.配置webpack輸出路徑和命名規則
3.配置模塊resolve規則
4.配置不一樣類型模塊的處理規則
'use strict' const path = require('path') // node.js的文件路徑，用來處理文件當中的路徑問題 // 傳送門:http://www.jianshu.com/p/fe41ee02efc8 const utils = require('./utils') //引入utils.js模塊 const config = require('../config') // 默認是index文件，引入index.js模塊 const vueLoaderConfig = require('./vue-loader.conf') // vue-loader.conf配置文件是用來解決各類css文件的，定義了諸如css,less,sass之類的和樣式有關的loader function resolve (dir) { //拼接出絕對路徑 return path.join(__dirname, '..', dir) } // 此函數是用來返回當前目錄的平行目錄的路徑，由於有個'..' const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } }) module.exports = { //path.join將路徑片斷進行拼接，而path.resolve將以/開始的路徑片斷做爲根目錄，在此以前的路徑將會被丟棄 //path.join('/a', '/b') // 'a/b', //path.resolve('/a', '/b') // '/b' context: path.resolve(__dirname, '../'), // 基礎目錄（絕對路徑），用於從配置中解析入口點和加載程序 // 配置入口，默認爲單頁面因此只有app一個入口 entry: { app: './src/main.js' }, // 配置出口，默認是/dist做爲目標文件夾的路徑 output: { path: config.build.assetsRoot, // 打包生成的出口文件所放的位置 filename: '[name].js', // 打包生成文件名app.js,,即插入到index.html的js的名字 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath // 項目上線地址，也就是真正的文件引用路徑，若是是production環境，其實這裏都是'/' }, resolve: { //定義能夠省寫擴展名的文件類型，好比一個js文件，則引用時書寫可不要寫.js extensions: ['.js', '.vue', '.json'], alias: { // 建立路徑的別名，使用上面的resolve,好比增長'components': resolve('src/components')等 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'styles': resolve('src/assets/styles'), 'common': resolve('src/common'), } }, // 使用插件配置相應文件的處理方法 module: { rules: [ // 使用vue-loader將vue文件轉化成js的模塊 ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, //匹配以.vue結尾的文件名 loader: 'vue-loader', options: vueLoaderConfig }, //js文件須要經過babel-loader進行編譯成es5文件以及壓縮等操做 { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, //圖片、音像、字體都使用url-loader進行處理，超過10000會編譯成base64 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, // 限制文件最大值 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, // 如下選項是Node.js全局變量或模塊，這裏主要是防止webpack注入一些Node.js的東西到vue中 //不一樣的文件模塊使用不一樣的loader node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } //這些選項能夠配置是否 polyfill 或 mock 某些 Node.js 全局變量和模塊。這可使最初爲 Node.js 環境編寫的代碼，在其餘環境（如瀏覽器）中運行. //傳送門:http://www.css88.com/doc/webpack/configuration/node/ }
n webpack.dev.conf.js
當執行npm run dev時，咱們執行的就是該js文件，該文件主要完成如下任務：
１.引入相關插件和配置
2.生成處理各類樣式的規則
3.配置開發環境，如熱更新、監聽端口號，是否自動打開瀏覽器等都在webpack中的devServer中配置完成
4.尋找可利用的端口和添加顯示程序編譯運行時的錯誤信息。
'use strict' const utils = require('./utils') // utils提供工具函數，包括生成處理各類樣式語言的loader，獲取資源文件存放路徑的工具函數。 const webpack = require('webpack') // 引入webpack模塊 const config = require('../config') // 默認是index文件 const merge = require('webpack-merge') //經過webpack-merge實現webpack.dev.conf.js對wepack.base.config.js的繼承,將基礎配置和開發環境配置或者生產環境配置合併在一塊兒的包管理 const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') // 引入基本webpack基本配置 const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') // 文件名及時更改，自動打包而且生成響應的文件在index.html裏面 // 傳送門:https://webpack.js.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx //美化webpack的錯誤信息和日誌的插件,可識別某些類型的webpack錯誤並清理，彙總和優先化它們以提供更好的開發者體驗。 https://www.npmjs.com/package/friendly-errors-webpack-plugin const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder') // 查看空閒端口位置，默認狀況下搜索8000這個端口 const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) //processs爲node的一個全局對象獲取當前程序的環境變量，即host， // 傳送門:http://javascript.ruanyifeng.com/nodejs/process.html#toc5 const devWebpackConfig = merge(baseWebpackConfig, { module: { // 規則是工具utils中處理出來的styleLoaders，生成了css，less,postcss等規則,並進行模塊轉換，轉換成webpack可識別的文件，進行解析轉換 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // 加強調試信息 //此處的配置都是在config的index.js中設定好了 // these devServer options should be customized in /config/index.js devServer: { // https://webpack.docschina.org/configuration/devtool clientLogLevel: 'warning', // 控制檯顯示的選項有none, error, warning 或者 info // 在開發工具(DevTools)的控制檯將顯示消息【如：在從新加載以前，在一個錯誤以前，或者模塊熱替換(HMR)啓動時，這可能顯示得很繁瑣】 // 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-clientloglevel //當使用 HTML5 History API 時，任意的 404 響應均可能須要被替代爲 index.html historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, // 啓動模塊熱更新特性 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-hot contentBase: false, // since we use CopyWebpackPlugin. compress: true, // 一切服務都啓動用gzip方式進行壓縮代碼 host: HOST || config.dev.host, // 指定使用一個host,默認是localhost,獲取HOST地址，該文件定義或config中index裏的dev配置裏獲取 port: PORT || config.dev.port, // 指定要監聽的端口號 open: config.dev.autoOpenBrowser, // 調試時自動打開瀏覽器 overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, // 當出現編譯器錯誤或警告時，在瀏覽器中顯示全屏疊加,覆蓋到瀏覽器的項目頁面的上方。{warning:false,errors:true}這個選項爲 顯示錯誤和警告 // 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-overlay publicPath: config.dev.assetsPublicPath, // 服務器假設運行在http://localhost:8080而且output.filename被設置爲bundle.js默認。publicPath是"/"，因此你的包（束）經過能夠http://localhost:8080/bundle.js訪問。 // 好比將config中的index.js dev對象的中的assertsPublicPath設置爲"/asserts/"那麼文件打開後將經過http://localhost:8080/asserts/來進行訪問 // 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-publicpath- proxy: config.dev.proxyTable, // 若是你有單獨的後端開發服務器API，而且但願在同域名下發送API請求，那麼代理某些URL將頗有用.簡稱就是API代理,中間件 需引入 http-proxy-middleware // 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-proxy quiet: true, // 控制檯是否禁止打印警告和錯誤,若用FriendlyErrorsPlugin 此處爲 true,necessary for FriendlyErrorsPlugin // 啓用quiet後，除了初始啓動信息以外的任何內容都不會被打印到控制檯。這也意味着來自的WebPack的錯誤或警告在控制檯不可見。 // 傳送門:https://doc.webpack-china.org/configuration/dev-server/#devserver-quiet- watchOptions: { poll: config.dev.poll, // webpack使用文件系統（file system）獲取文件改動的 } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), // 將DefinePlugin容許您建立可在配置全局常量的編譯時間。這對於容許開發構建和發佈構建之間的不一樣行爲是有用的 // 傳送門:https://webpack.js.org/plugins/define-plugin/#src/components/Sidebar/Sidebar.jsx new webpack.HotModuleReplacementPlugin(), // 永遠不能用在生產模式，模塊熱更新,修改文件的內容，容許在運行時更新各類模塊，而無需進行徹底刷新。 // 傳送門:https://doc.webpack-china.org/guides/hot-module-replacement/ new webpack.NamedModulesPlugin(), // 當進行熱更新時，相關文件名會被展現出來 // 傳送門:https://webpack.js.org/plugins/named-modules-plugin/#src/components/Sidebar/Sidebar.jsx new webpack.NoEmitOnErrorsPlugin(), // 跳過編譯時出錯的代碼並記錄，使編譯後運行時的包不會發生錯誤。 // 傳送門:https://webpack.js.org/plugins/no-emit-on-errors-plugin/#src/components/Sidebar/Sidebar.jsx new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // 該插件可自動生成一個 html5 文件或使用模板文件將編譯好的代碼注入進去 // 傳送門:https://webpack.js.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx // https://github.com/ampedandwired/html-webpack-plugin // copy custom static assets new CopyWebpackPlugin([ // 複製插件 { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] // 忽略.*的文件 } ]) ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port //因爲portfinder這個插件自己是從8000開始查找，這裏設置查找的默認端口號 portfinder.getPort((err, port) => { if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port //端口被佔用時就從新設置evn和devServer的端口 // add port to devServer config devWebpackConfig.devServer.port = port // 若是端口被佔用就設置devServer的端口 //友好地輸出信息 // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], }, // 添加提示信息，所在域名和端口的提示信息 onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) // 窗口提示信息,調用utils工具函數的createNotifierCallBack()方法 resolve(devWebpackConfig) // 若是找到能用的端口號，就把配置信息提示拋出去 } }) })
n webpack.prod.conf.js
構建的時候用到的webpack配置來自webpack.prod.conf.js，該配置一樣是在webpack.base.conf基礎上的進一步完善。主要完成下面幾件事情：
1.合併基礎的webpack配置
2.配置樣式文件的處理規則，styleLoaders
3.配置webpack的輸出
4.配置webpack插件
5.gzip模式下的webpack插件配置
6.webpack-bundle分析
'use strict' const path = require('path') // node.js的文件路徑，用來處理文件當中的路徑問題 // 傳送門:http://www.jianshu.com/p/fe41ee02efc8 const utils = require('./utils') //引入utils.js模塊 const webpack = require('webpack') // 引入webpack模塊 const config = require('../config') // 默認是index文件，引入index.js模塊 const merge = require('webpack-merge') // 將基礎配置和開發環境配置或者生產環境配置合併在一塊兒的包管理 const baseWebpackConfig = require('./webpack.base.conf') // 引入基本webpack基本配置 const CopyWebpackPlugin = require('copy-webpack-plugin') // 在webpack中拷貝文件和文件夾 // 傳送門:https://doc.webpack-china.org/plugins/copy-webpack-plugin/#src/components/Sidebar/Sidebar.jsx const HtmlWebpackPlugin = require('html-webpack-plugin') // 文件名即便更改，自動打包而且生成響應的文件在index.html裏面 // 傳送門:https://webpack.js.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx const ExtractTextPlugin = require('extract-text-webpack-plugin') // 它會將全部的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件 // https://doc.webpack-china.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') //一個用來壓縮優化CSS大小的東西 // 傳送門:http://npm.taobao.org/package/optimize-css-assets-webpack-plugin const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 一個用來壓縮優化JS大小的東西 // 傳送門:https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#src/components/Sidebar/Sidebar.jsx const env = require('../config/prod.env') // 引入生產環境 const webpackConfig = merge(baseWebpackConfig, { module: { //調用utils.styleLoaders的方法 rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, // 開啓調試的模式。默認爲true extract: true, usePostCSS: true }) }, // 將webpack基本配置和生產環境配置合併在一塊兒，生成css,postcss,less等規則，並進行模塊轉換，轉換成webpack可識別的文件，進行解析 // 將CSS提取到單獨文件中去 devtool: config.build.productionSourceMap ? config.build.devtool : false, // 是否使用sourcemap output: { path: config.build.assetsRoot, // 文件打包的輸出路徑 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 主文件入口文件名字 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 非主文件入口文件名 // 傳送門:http://react-china.org/t/webpack-output-filename-output-chunkfilename/2256 }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), // DefinePlugin 容許建立一個在編譯時能夠配置的全局常量。這可能會對開發模式和發佈模式的構建容許不一樣的行爲很是有用。 // https://doc.webpack-china.org/plugins/define-plugin/#src/components/Sidebar/Sidebar.jsx new UglifyJsPlugin({ uglifyOptions: { compress: { //壓縮 warnings: false //警告：true保留警告，false不保留 } }, sourceMap: config.build.productionSourceMap, parallel: true }), // 一個用來壓縮優化JS大小的東西 // 傳送門:https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#src/components/Sidebar/Sidebar.jsx // extract css into its own file new ExtractTextPlugin({ //抽取文本。好比打包以後的index頁面有style插入，就是這個插件抽取出來的，減小請求 filename: utils.assetsPath('css/[name].[contenthash].css'), // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 allChunks: true, }), // 它會將全部的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件 // https://doc.webpack-china.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ // 優化css的插件 cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), //一個用來壓縮優化CSS大小的東西 // 傳送門:http://npm.taobao.org/package/optimize-css-assets-webpack-plugin // 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({ // html打包 filename: config.build.index, template: 'index.html', inject: true, minify: { // 壓縮 removeComments: true, // 刪除index.html中的註釋 collapseWhitespace: true, // 刪除index.html中的空格 removeAttributeQuotes: true // 刪除各類html標籤屬性值的雙引號 // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' // 注入依賴的時候按照依賴前後順序進行注入，好比，須要先注入vendor.js，再注入app.js }), new webpack.HashedModuleIdsPlugin(), // 該插件會根據模塊的相對路徑生成一個四位數的hash做爲模塊id, 建議用於生產環境。 // 傳送門:https://doc.webpack-china.org/plugins/hashed-module-ids-plugin/#src/components/Sidebar/Sidebar.jsx new webpack.optimize.ModuleConcatenationPlugin(), // 預編譯全部模塊到一個閉包中，提高你的代碼在瀏覽器中的執行速度。 // 傳送門:https://doc.webpack-china.org/plugins/module-concatenation-plugin/#src/components/Sidebar/Sidebar.jsx // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ // 抽取公共的模塊 name: 'vendor', minChunks (module) { // 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 ) } }), // 將全部從node_modules中引入的js提取到vendor.js，即抽取庫文件 // 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', minChunks: Infinity }), // 把webpack的runtime和manifest這些webpack管理全部模塊交互的代碼打包到[name].js文件中,防止build以後vendor的hash值被更新[疑問] // 傳送門:https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // copy custom static assets new CopyWebpackPlugin([ // 複製，好比打包完以後須要把打包的文件複製到dist裏面 { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) // 在webpack中拷貝文件和文件夾 // 傳送門:https://doc.webpack-china.org/plugins/copy-webpack-plugin/#src/components/Sidebar/Sidebar.jsx ] }) if (config.build.productionGzip) { const 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 }) ) } // 提供帶 Content-Encoding 編碼的壓縮版的資源 // 傳送門:https://doc.webpack-china.org/plugins/compression-webpack-plugin/#src/components/Sidebar/Sidebar.jsx if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } // 分析 bundle 內容的插件及 CLI 工具，以便捷的、交互式、可縮放的樹狀圖形式展示給用戶。 // 傳送門:https://github.com/webpack-contrib/webpack-bundle-analyzer module.exports = webpackConfig
l config 打包及運行的目錄的配置文件(存的基本都是地址的鍵值對)，config內的文件實際上是服務於build的，大部分是定義一個變量export出去。
n dev.env.js 該文件主要來設置開發環境變量。
'use strict' // 採用嚴格模式，https://www.npmjs.com/package/webpack-merge const merge = require('webpack-merge') // 引入webpack-merge模塊 // webpack-merge提供了一個合併函數，它將數組和合並對象建立一個新對象。 // 若是遇到函數，它將執行它們，經過算法運行結果，而後再次將返回的值封裝在函數中.這邊將dev和prod進行合併 // 傳送門:https://doc.webpack-china.org/guides/production/ const prodEnv = require('./prod.env') // 引入生產環境配置 module.exports = merge(prodEnv, { NODE_ENV: '"development"' }) // 配置NODE_ENV來決定開發環境 // 這個就是用來上線的時候用到，來決定是開發環境仍是生產環境，來進行相關的配置解決方案
n prod.env.js 該文件主要來設置生產環境變量。當開發時調取dev.env.js的開發環境配置，發佈時調用prod.env.js的生產環境配置
'use strict' module.exports = { NODE_ENV: '"production"' } //NODE_ENV決定生產環境
n Index.js config文件夾下，最主要的就是index.js文件，保存着開發環境和生產環境所須要的信息。
'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. // 這個文件描述了開發和生產環境的配置 const path = require('path') // node.js的文件路徑，用來處理文件當中的路徑問題 // 傳送門:http://www.jianshu.com/p/fe41ee02efc8 module.exports = { //開發環境配置 dev: { assetsSubDirectory: 'static', // 二級目錄，通常存放css,js,image等靜態資源文件文件 assetsPublicPath: '/', // 根目錄 // 發佈路徑，若是構建後的產品文件有用於CDN或者放到其餘域名服務器，能夠在這裏設置，固然本地打包，本地瀏覽通常都將這裏設置爲"./" // 設置以後的構建的產品在注入到index.html中就會帶上這裏的發佈路徑 proxyTable: { // 可利用該屬性解決跨域的問題 '/api': { target: 'http://127.0.0.1:9020', // 請求後臺的地址 pathRewrite: { '^/api': '/static/mock' // 後面請求方法中若是有'/api'會自動被重寫爲'/static/mock' } } }, // Various Dev Server settings host: '127.0.0.1', // 各類開發服務器的配置,本地啓動地址,可被process.env.HOST 重寫 port: 9020, // 端口號, 可被process.env.PORT重寫, 若是被佔用,則會自動產生一個新的端口使用 autoOpenBrowser: false, // 是否在編譯時自動打開瀏覽器,默認false errorOverlay: true, // 當出現編譯器錯誤或警告時，在瀏覽器中顯示全屏疊加,覆蓋到瀏覽器的項目頁面的上方。{warning:false,errors:true}這個選項爲 顯示錯誤和警告 notifyOnErrors: true, // 跨平臺錯誤提示,是否容許窗口彈出錯誤信息 poll: false, // webpack使用文件系統(file system)獲取文件改動的通知devServer.watchOptions https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // 若是使用了eslint,您的代碼將在捆綁和鏈接錯誤和警告將在控制檯中顯示。 // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, // 若是使用了eslint,違反eslint規則的錯誤和警告也將被顯示在瀏覽器的透明黑色層上面 /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // 增長調試，該屬性爲原始源代碼（僅限行）不可在生產環境中使用 // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, // 是否經過將哈希查詢附加到文件名來生成具備緩存清除的源映射[疑問，求解] // 傳送門:https://vue-loader.vuejs.org/en/options.html#cachebusting cssSourceMap: true // 開發環境下，不顯示cssSourceMap // 代碼壓縮後進行調bug定位將很是困難，因而引入sourcemap記錄壓縮先後的位置信息記錄，當產生錯誤時直接定位到未壓縮前的位置，將大大的方便咱們調試 }, //生產環境配置 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), //index編譯後生成的位置和名字，根據須要改變後綴，好比index.php // Paths assetsRoot: path.resolve(__dirname, '../dist'), // 編譯後存放生成環境代碼的位置 assetsSubDirectory: 'static', // js,css,images存放文件夾名 assetsPublicPath: '/', // 發佈的根目錄，一般本地打包dist後打開文件會報錯，此處修改成'./'。 //若是是上線的文件，可根據文件存放位置進行更改路徑例'/claimform/' /** * Source Maps */ productionSourceMap: true, // production環境下生成sourceMap文件 // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // 開啓調試的類型 // 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 productionGzip: false, // unit的gzip命令用來壓縮文件，gzip模式下須要壓縮的文件的擴展名有js和css 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 // 是否展現webpack構建打包以後的分析報告 } }
l src 存放本身寫的源代碼
可新建文件夾, 例如pages: 存放頁面組件. api: 存放封裝請求的參數和方法. store: vuex狀態管理工具等 1、assets文件：腳手架自動會放入一個圖片在裏面做爲初始頁面的logo。日常咱們使用的時候會在裏面創建js，css，img，fonts等文件夾，做爲靜態資源調用 2、components文件夾：用來存放組件，合理地使用組件能夠高效地實現複用等功能，從而更好地開發項目。通常狀況下好比建立頭部組件的時候，咱們會新建一個header的文件夾，而後再新建一個header.vue的文件 三、router文件夾：該文件夾下有一個叫index.js文件，用於實現頁面的路由跳轉，具體使用請點擊→vue-router傳送門 四、App.vue：做爲咱們的主組件，可經過使用<router-view/>開放入口讓其餘的頁面組件得以顯示。 五、main.js：做爲咱們的入口文件，主要做用是初始化vue實例並使用須要的插件，小型項目省略router時可放在該處
l static 用於存放靜態資源(能夠存放圖片什麼的),空的也不能刪除
l node_modules：根據package.json安裝時候生成的的依賴（安裝包），存放是項目依賴的工具及庫文件(webpack原本是沒有的,cnpm install後自動建立的)
l .babelrc babel的配置文件(轉換ES6語法的)
{ // 制定轉碼的規則 "presets": [ // env是使用babel-preset-env插件將js進行轉碼成es5，而且設置不轉碼的AMD,COMMONJS的模塊文件，制定瀏覽器的兼容 ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
l test 用於存放測試代碼的文件(存放單元測試啊什麼的)
l .editorconfig編輯器的配置文件
l package.lock.json：鎖定安裝時的包的版本號，而且須要上傳到git，以保證其餘人在npm install時你們的依賴能保證一致
l .gitignore:代碼管理工具,作git配置的
//文件夾忽略 .DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* static/mock //文件忽略 # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln
l .postcssrc.js
// https://github.com/michael-ciniawsky/postcss-load-config module.exports = { "plugins": { "postcss-import": {}, // 使用@import引入css, 詳細: https://www.npmjs.com/package/postcss-import "postcss-url": {}, // 可將url定義一個常量, 能夠引用使用, 或將url自動編譯等等等 詳細: https://www.npmjs.com/package/postcss-url // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {} // 自動補充廠商前綴 詳細: https://www.npmjs.com/package/autoprefixer } }
l index.html 項目的主頁面，通過編譯以後的代碼將插入到這來(定位到項目,而且沒有指定默認路徑,就會定位到這個index頁面)
l README.md項目的說明書
相關文章
- 1. 從0構建vue項目
- 2. Vue-cli(二) 項目結構
- 3. Vue項目搭建和結構分析
- 4. vue項目結構講解
- 5. 從零搭建vue項目
- 6. vue項目結構
- 7. Vue項目結構
- 8. VUE-項目結構
- 9. web項目的項目結構解析
- 10. 構建vue項目
- 更多相關文章...
- • Maven 構建 Java 項目 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • 算法總結-二分查找法
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 從0構建vue項目
- 2. Vue-cli(二) 項目結構
- 3. Vue項目搭建和結構分析
- 4. vue項目結構講解
- 5. 從零搭建vue項目
- 6. vue項目結構
- 7. Vue項目結構
- 8. VUE-項目結構
- 9. web項目的項目結構解析
- 10. 構建vue項目