从零构建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项目