您的位置:时时app平台注册网站 > web前端 > vue-cli 结构【彩世界网址】

vue-cli 结构【彩世界网址】

2019-11-08 03:47
{
dev-server.js

彩世界网址 1

dev-server.js.png

config对运作时和开荒时的有些布署
path  node提供的文书操作的API
express  node框架启动webserver
webpack  node引入webpack编译
proxyMiddleware http哀告代理转载一些API
webpackConfig  webpack相关配置require("./webpack.dev.conf")是支付情状中的相关陈设
port端口号,process.env.PORT || config.dev.port能够是情况变量中获得恐怕在config中的dev.port中装置

webpack.base.confg.js   webpack的底子配置文件

module.export = {

    // 编写翻译入口文件

    entry: {},

    // 编写翻译输出路线

    output: {},

    // 一些解决方案布置

    resolve: {},

    resolveLoader: {},

    module: {

        // 各个分裂档案的次序文件加载器配置

        loaders: {

        ...

        ...

        // js文件用babel转码

        {

            test: /.js$/,

            loader: 'babel',

            include: projectRoot,

            // 哪些文件无需转码

            exclude: /node_modules/

        },

        ...

        ...

        }

    },

    // vue文件一些皮之不存毛将焉附陈设

    vue: {}

}

 

5、其余文件

①、.editorconfig:编辑器的布局文件

②、.gitignore:忽视git提交的二个文书,配置之后提交时将不会加载忽略的公文

③、index.html:页面入口,经过编写翻译之后的代码将插入到那来。

④、package.lock.json:锁虞升卿装时的包的本子号,何况供给上传到git,以承保其余人在npm install时大家的依附能保障同生机勃勃

⑤、README.md:可此填写项目介绍

⑥、node_modules:依据package.json安装时候生成的的重视(安装包卡塔 尔(英语:State of Qatar)

webpack.dev.conf配置文件

彩世界网址 2

webpack.dev.conf.png

merge用来统生机勃勃配置文件
utils是一些工具和方式
baseWebpackConfig是运转时的豆蔻梢头对布署文件被支付和周转分享的配置
HtmlwebpackPluginwebpack提供操作html的有的插件

npm run build      安排   是将Vue网页放到服务器上

我们在命令行中输入npm run build命令后,vue-cli会自动进行项目揭露打包。你在package.json文件的scripts字段中能够看看,你推行的npm run build命令就相对施行的 node build/build.js     开辟应用           npm run dev       项目根目录生成了dist文件夹,那个文件夹里边正是大家要传播服务器上的文件。

dist文件夹下目录包蕴:

  • index.html 主页文件:因为大家开垦的是单页web应用,所以说常常独有贰个html文件。
  • static 静态能源文件夹:里边js、CSS和局地图纸。
options: {
package.json

彩世界网址 3

package.json.png

npm run dev运营的正是 build/dev-server.js这么些文件

.

|-- build                            // 项目构建(webpack)相关代码

|   |-- build.js                     // 生产情状构建代码

|   |-- check-version.js             // 检查node、npm等版本

|   |-- dev-client.js                // 热重载相关

|   |-- dev-server.js                // 创设地面服务器

|   |-- utils.js                     // 构建筑工程具相关

|   |-- webpack.base.conf.js         // webpack根底配置

|   |-- webpack.dev.conf.js          // webpack开垦状况安插

|   |-- webpack.prod.conf.js         // webpack生产条件计划

|-- config                           // 项目开采条件安插

|   |-- dev.env.js                   // 开荒境况变量

|   |-- index.js                     // 项目部分配置变量

|   |-- prod.env.js                  // 临蓐情状变量

|   |-- test.env.js                  // 测量试验情形变量

|-- src                              // 源码目录

|   |-- components                     // vue公共组件

|   |-- store                          // vuex的场地管理

|   |-- App.vue                        // 页面入口文件

|   |-- main.js                        // 程序入口文件,加载各样公共组件

|-- static                           // 静态文件,举个例子有的图片,json数据等

|   |-- data                           // 群聊分析得到的数额用于数据可视化

|-- .babelrc                         // ES6语法编译配置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                       // git上传供给忽视的文件格式

|-- README.md                        // 项目表明

|-- favicon.ico

|-- index.html                       // 入口页面

|-- package.json                     // 项目为主新闻

 

 

loader: 'babel-loader',
骨架

├── index.html 入口页面
├── build 构建脚本目录
│ ├──── build-server.js 运维业地创设服务器,能够访问创设后的页面
│ ├──── build.js 坐蓐条件营造脚本
│ ├──── dev-client.js 开垦服务器热重载脚本,主要用以完结开垦阶段的页面自动刷新
│ ├──── dev-server.js 运营业地开采服务器
│ ├──── utils.js 创设相关工具方法
│ ├──── webpack.base.conf.js wabpack根基配置
│ ├──── webpack.dev.conf.js wabpack开拓条件布署
│ └──── webpack.prod.conf.js wabpack分娩意况布署
├── config 项目布置
│ ├──── dev.env.js 开辟景况变量
│ ├──── index.js 项目布局文件
│ ├──── prod.env.js 分娩蒙受变量
│ └──── test.env.js 测量试验情状变量
├── mock mock数据目录
│ └──── hello.js
├──── package.json npm包配置文件,里面定义了花色的npm脚本,正视包等新闻
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 能源目录,这里的能源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state卡塔尔国
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态财富,不会被wabpack创设。
└── test 测量试验文件目录(unit&e2e卡塔尔国
└── unit 单元测量检验
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

webpack配置相关

笔者们在地方说了运维npm run dev 就一定于实行了node build/dev-server.js,表明这几个文件相当重大,先来了解一下它。 

loader: 'url-loader',
webpack.base.conf.js

彩世界网址 4

webpack.base.conf.js.png

projectRoot概念根目录path.resolve(__dirname,''../)是表示上一级
entry是进口文件的布署
output是出口的布局path:config.build.assetsRoot是在config目录下创办一个根文件其实正是index.js

主要文件package.json

ackage.json文件是类别根目录下的一个文本,定义该品种费用所要求的各个模块以至部分门类布局消息(如项目名称、版本、描述、我等卡塔 尔(英语:State of Qatar)。

package.json 里的scripts字段,这几个字段定义了您能够用npm运维的通令。在开拓意况下,在命令行工具中运作npm run dev 就一定于实施 node build/dev-server.js  .约等于翻开了多少个node写的开荒行提出服务器。因而能够见见script字段是用来内定npm相关命令的缩写。

  "scripts": {

    "dev": "node build/dev-server.js",

    "build": "node build/build.js"

  },

 

dependencies字段和devDependencies字段

  • dependencies字段指项目运作时所依附的模块;
  • devDependencies字段内定了体系费用时所依赖的模块;

在指令行中运维npm install命令,会自行安装dependencies和dev德姆pendencies字段中的模块。package.json还应该有大多有关配置

4、vue-loader.conf.js

该公文的首要性职能就是管理.vue文件,拆解分析那么些文件中的各类语言块(template、script、style),调换到js可用的js模块。

dev-server.js

},

// 检查 Node 和 npm 版本

require('./check-versions')()

 

// 获取 config/index.js 的私下认可配置

var config = require('../config')

 

// 如若 Node 的条件不能够料定当前是 dev / product 景况

// 使用 config.dev.env.NODE_ENV 作为当前的情状

 

if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)

 

// 使用 NodeJS 自带的文本路线工具

var path = require('path')

 

// 使用 express

var express = require('express')

 

// 使用 webpack

var webpack = require('webpack')

 

// 二个得以强制张开浏览器并跳转到钦点 url 的插件

var opn = require('opn')

 

// 使用 proxyTable

var proxyMiddleware = require('http-proxy-middleware')

 

// 使用 dev 环境的 webpack 配置

var webpackConfig = require('./webpack.dev.conf')

 

// default port where dev server listens for incoming traffic

 

// 若无一点点名运维端口,使用 config.dev.port 作为运营端口

var port = process.env.PORT || config.dev.port

 

// Define HTTP proxies to your custom API backend

//

 

// 使用 config.dev.proxyTable 的配备作为 proxyTable 的代办配置

var proxyTable = config.dev.proxyTable

 

// 使用 express 运维三个劳动

var app = express()

 

// 运维 webpack 进行编写翻译

var compiler = webpack(webpackConfig)

 

// 运维 webpack-dev-middleware,将 编写翻译后的文件暂存到内部存款和储蓄器中

var devMiddleware = require('webpack-dev-middleware')(compiler, {

  publicPath: webpackConfig.output.publicPath,

  stats: {

    colors: true,

    chunks: false

  }

})

 

// 运维 webpack-hot-middleware,也正是大家常说的 Hot-reload

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// force page reload when html-webpack-plugin template changes

compiler.plugin('compilation', function (compilation) {

  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

    hotMiddleware.publish({ action: 'reload' })

    cb()

  })

})

 

// proxy api requests

// 将 proxyTable 中的哀告配置挂在到起步的 express 服务上

Object.keys(proxyTable).forEach(function (context) {

  var options = proxyTable[context]

  if (typeof options === 'string') {

    options = { target: options }

  }

  app.use(proxyMiddleware(context, options))

})

 

// handle fallback for HTML5 history API

// 使用 connect-history-api-fallback 相配财富,假若不合营就可以重定向到钦赐地点

app.use(require('connect-history-api-fallback')())

 

// serve webpack bundle output

// 将暂存到内存中的 webpack 编写翻译后的文本挂在到 express 服务上

app.use(devMiddleware)

 

// enable hot-reload and state-preserving

// compilation error display

// 将 Hot-reload 挂在到 express 服务上

app.use(hotMiddleware)

 

// serve pure static assets

// 拼接 static 文件夹的静态财富路线

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

// 为静态能源提供响应服务

app.use(staticPath, express.static('./static'))

 

// 让我们那些 express 服务监听 port 的乞请,况兼将此服务作为 dev-server.js 的接口揭露

module.exports = app.listen(port, function (err) {

  if (err) {

    console.log(err)

    return

  }

  var uri = ':' port

  console.log('Listening at ' uri 'n')

 

  // when env is testing, don't need open it

  // 假设不是测验景况,自动张开浏览器并跳到大家的支付地址

  if (process.env.NODE_ENV !== 'testing') {

    opn(uri)

  }

})

 

 

 

},
net: 'empty',
const vueLoaderConfig = require('./vue-loader.conf')
test: /.js$/,
1、build/build.js

该公文成效,即营造临盆版本。package.json中的scripts的build正是node build/build.js,输入指令行npm run build对该公文举行编写翻译生成生产条件的代码。

 

'use strict'

 

 

require('./check-versions')()//check-versions:调用检查版本的文件。加()代表直接调用该函数

 

 

process.env.NODE_ENV = 'production'//设置当前是生产环境

 

 

//下面定义常量引入插件

 

 

const ora = require('ora')//①加载动画

 

 

const rm = require('rimraf')//②删除文件

 

 

const path = require('path')

 

 

const chalk = require('chalk')//③对文案输出的一个彩色设置

 

 

const webpack = require('webpack')

 

 

const config = require('../config')//默认读取下面的index.js文件

 

 

const webpackConfig = require('./webpack.prod.conf')

 

 

//调用start的方法实现加载动画,优化用户体验

 

 

const spinner = ora('building for production...')

 

 

spinner.start()

 

 

//先删除dist文件再生成新文件,因为有时候会使用hash来命名,删除整个文件可避免冗余

 

 

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

 

 

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

 

 

}) 'nn')

 

 

if (stats.hasErrors()) {

 

 

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'

 

 

))

 

 

})

 

})

},
app: './src/main.js'
? config.build.assetsPublicPath
//js文件需要通过babel-loader进行编译成es5文件以及压缩等操作②
1、config/dev.env.js

config内的公文其实是劳动于build的,大多数是概念三个变量export出去。

 

'use strict'//采用严格模式

 

 

const merge = require('webpack-merge')//①

 

 

const prodEnv = require('./prod.env')

 

 

//webpack-merge提供了一个合并函数,它将数组和合并对象创建一个新对象。

 

 

//如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值封装在函数中.这边将dev和prod进行合并

 

 

module.exports = merge(prodEnv, {

 

 

NODE_ENV: '"development"'

 

})

dgram: 'empty',

四、build文件夹

彩世界网址 5

 

 

//path.join将路径片段进行拼接,而path.resolve将以/开始的路径片段作为根目录,在此之前的路径将会被丢弃
7、webpack.prod.conf.js

 

'use strict'

 

 

const path = require('path')

 

 

const utils = require('./utils')

 

 

const webpack = require('webpack')

 

 

const config = require('../config')

 

 

const merge = require('webpack-merge')

 

 

const baseWebpackConfig = require('./webpack.base.conf')

 

 

const CopyWebpackPlugin = require('copy-webpack-plugin')

 

 

const HtmlWebpackPlugin = require('html-webpack-plugin')

 

 

const ExtractTextPlugin = require('extract-text-webpack-plugin')

 

 

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

 

 

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

 

 

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

 

 

})

 

 

},

 

 

devtool: config.build.productionSourceMap ? config.build.devtool : false,

 

 

output: {

 

 

path: config.build.assetsRoot,

 

 

filename: utils.assetsPath('js/[name].[chunkhash].js'),

 

 

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

 

 

},

 

 

plugins: [

 

 

new webpack.DefinePlugin({

 

 

'process.env': env

 

 

}),

 

 

new UglifyJsPlugin({

 

 

uglifyOptions: {

 

 

compress: {//压缩

 

 

warnings: false//警告:true保留警告,false不保留

 

 

}

 

 

},

 

 

sourceMap: config.build.productionSourceMap,

 

 

parallel: true

 

 

}),

 

 

new ExtractTextPlugin({//抽取文本。比如打包之后的index页面有style插入,就是这个插件抽取出来的,减少请求

 

 

filename: utils.assetsPath('css/[name].[contenthash].css'),

 

 

allChunks: true,

 

 

}),

 

 

new OptimizeCSSPlugin({//优化css的插件

 

 

cssProcessorOptions: config.build.productionSourceMap

 

 

? { safe: true, map: { inline: false } }

 

 

: { safe: true }

 

 

}),

 

 

new HtmlWebpackPlugin({//html打包

 

 

filename: config.build.index,

 

 

template: 'index.html',

 

 

inject: true,

 

 

minify: {//压缩

 

 

removeComments: true,//删除注释

 

 

collapseWhitespace: true,//删除空格

 

 

removeAttributeQuotes: true//删除属性的引号

 

 

},

 

 

chunksSortMode: 'dependency'//模块排序,按照我们需要的顺序排序

 

 

}),

 

 

new webpack.HashedModuleIdsPlugin(),

 

 

new webpack.optimize.ModuleConcatenationPlugin(),

 

 

new webpack.optimize.CommonsChunkPlugin({//抽取公共的模块

 

 

name: 'vendor',

 

 

minChunks (module) {

 

 

return (

 

 

module.resource &&

 

 

/.js$/.test(module.resource) &&

 

 

module.resource.indexOf(

 

 

path.join(__dirname, '../node_modules')

 

 

) === 0

 

 

)

 

 

}

 

 

}),

 

 

new webpack.optimize.CommonsChunkPlugin({

 

 

name: 'manifest',

 

 

minChunks: Infinity

 

 

}),

 

 

new webpack.optimize.CommonsChunkPlugin({

 

 

name: 'app',

 

 

async: 'vendor-async',

 

 

children: true,

 

 

minChunks: 3

 

 

}),

 

 

new CopyWebpackPlugin([//复制,比如打包完之后需要把打包的文件复制到dist里面

 

 

{

 

 

from: path.resolve(__dirname, '../static'),

 

 

to: config.build.assetsSubDirectory,

 

 

ignore: ['.*']

 

 

}

 

 

])

 

 

]

 

 

})

 

 

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

 

 

})

 

 

)

 

 

}

 

 

if (config.build.bundleAnalyzerReport) {

 

 

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

 

 

webpackConfig.plugins.push(new BundleAnalyzerPlugin())

 

 

}

 

 

module.exports = webpackConfig

 

limit: 10000,
1、 package.json

类型作为叁个我们庭,每一种文件都交融。package.json来拟订名单,必要哪些npm包来加入到项目中来,npm install命令遵照这么些布局文件增减来管理地方的安装包。

 

{

 

 

//从name到private都是package的配置信息,也就是我们在脚手架搭建中输入的项目描述

 

 

"name": "shop",//项目名称:不能以.(点)或者_(下划线)开头,不能包含大写字母,具有明确的的含义与现有项目名字不重复

 

 

"version": "1.0.0",//项目版本号:遵循“大版本.次要版本.小版本”

 

 

"description": "A Vue.js project",//项目描述

 

 

"author": "qietuniu",//作者名字

 

 

"private": true,//是否私有

 

 

//scripts中的子项即是我们在控制台运行的脚本的缩写

 

 

"scripts": {

 

 

//webpack-dev-server:启动了http服务器,实现实时编译;

 

 

//inline模式会在webpack.config.js入口配置中新增webpack-dev-server/client?http://localhost:8080/的入口,使得我们访问路径为localhost:8080/index.html(相应的还有另外一种模式Iframe);

 

 

//progress:显示打包的进度

 

 

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

 

 

"start": "npm run dev",//与npm run dev相同,直接运行开发环境

 

 

"build": "node build/build.js"//使用node运行build文件

 

 

},

 

 

//dependencies(项目依赖库):在安装时使用--save则写入到dependencies

 

 

"dependencies": {

 

 

"vue": "^2.5.2",//vue.js

 

 

"vue-router": "^3.0.1"//vue的路由插件

 

 

},

 

 

//和devDependencies(开发依赖库):在安装时使用--save-dev将写入到devDependencies

 

 

"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标签里

 

 

"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"

 

 

]

 

 

}

注释:

  • 1、devDependencies和dependencies的区分: devDependencies里面包车型客车插件只用于开采条件,不用于生产条件,即匡助功用,打包的时候必要,打包完结就没有要求了。而dependencies是索要公布到生育碰到的,从头到尾都在。举个例子wepack等只是在付出中行使的包就写入到devDependencies,而像vue那类别型全程注重的包要写入到devDependencies。

  • 2、file-loader和url-loader的分别:以图纸为例,file-loader可对图纸打开减削,但是照旧经过文件路线进行引进,当http央求加多时会减少页面质量,而url-loader通过设定limit参数,小于limit字节的图片会被转成base64的文本,大于limit字节的将拓展图纸压缩的操作。总的来讲,url-loader是file-loader的上层封装。

},
entry: {
3、build/utils.js

utils是工具的野趣,是三个用来管理css的文书。

注释:

  • path.posix:提供对路径方法的POSIX(可移植性操作系统接口卡塔 尔(英语:State of Qatar)特定达成的拜候,就能够跨平台,差异于win32。

  • path.join:用于连接路径,会正确运用当前系统的路子分隔符,Unix系统是"/",Windows系统是""

3、 .babelrc

 

该文件是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"]//①

 

}

const path = require('path')
'@': resolve('src'),
},
{
rules: [
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
//使用插件配置相应文件的处理方法
},
function resolve (dir) {
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
//拼接出绝对路径
const config = require('../config')
name: utils.assetsPath('media/[name].[hash:7].[ext]')
options: {
test: /.vue$/,
}
{

一、前言

vue-cli是营造vue单页应用的脚手架,输入生机勃勃串钦命的通令行进而自动生成vue.js wepack的品种模板。那中间webpack发挥了非常大的机能,它使得大家的代码模块化,引进一些插件帮大家周详职能能够将文件打包压缩,图片转base64等。早先时期对品种的布署使得大家对此脚手架自动生成的代码的通晓更为首要,接下去自个儿将依附webpack3.6.0本子结合文书档案将文件相继击破,纯干料。

2、config/prod.env.js

当开辟是调取dev.env.js的付出际遇布署,发布时调用prod.env.js的生产条件安插。

 

'use strict'

 

 

module.exports = {

 

 

NODE_ENV: '"production"'

 

}

//配置出口,默认是/dist作为目标文件夹的路径
output: {
}
3、config/index.js

 

'use strict'

 

 

const path = require('path')

 

 

module.exports = {

 

 

dev: {

 

 

// 开发环境下面的配置

 

 

assetsSubDirectory: 'static',//子目录,一般存放css,js,image等文件

 

 

assetsPublicPath: '/',//根目录

 

 

proxyTable: {},//可利用该属性解决跨域的问题

 

 

host: 'localhost', // 地址

 

 

port: 8080, //端口号设置,端口号占用出现问题可在此处修改

 

 

autoOpenBrowser: false,//是否在编译(输入命令行npm run dev)后打开http://localhost:8080/页面,以前配置为true,近些版本改为false,个人偏向习惯自动打开页面

 

 

errorOverlay: true,//浏览器错误提示

 

 

notifyOnErrors: true,//跨平台错误提示

 

 

poll: false, //使用文件系统(file system)获取文件改动的通知devServer.watchOptions

 

 

devtool: 'cheap-module-eval-source-map',//增加调试,该属性为原始源代码(仅限行)不可在生产环境中使用

 

 

cacheBusting: true,//使缓存失效

 

 

cssSourceMap: true//代码压缩后进行调bug定位将非常困难,于是引入sourcemap记录压缩前后的位置信息记录,当产生错误时直接定位到未压缩前的位置,将大大的方便我们调试

 

 

},

 

 

build: {

 

 

// 生产环境下面的配置

 

 

index: path.resolve(__dirname, '../dist/index.html'),//index编译后生成的位置和名字,根据需要改变后缀,比如index.php

 

 

assetsRoot: path.resolve(__dirname, '../dist'),//编译后存放生成环境代码的位置

 

 

assetsSubDirectory: 'static',//js,css,images存放文件夹名

 

 

assetsPublicPath: '/',//发布的根目录,通常本地打包dist后打开文件会报错,此处修改为./。如果是上线的文件,可根据文件存放位置进行更改路径

 

 

productionSourceMap: true,

 

 

devtool: '#source-map',

 

 

//unit的gzip命令用来压缩文件,gzip模式下需要压缩的文件的扩展名有js和css

 

 

productionGzip: false,

 

 

productionGzipExtensions: ['js', 'css'],

 

 

bundleAnalyzerReport: process.env.npm_config_report

 

 

}

 

}

loader: 'url-loader',
name: utils.assetsPath('img/[name].[hash:7].[ext]')
module.exports = {
limit: 10000,
}
//图片、音像、字体都使用url-loader进行处理,超过10000会编译成base64③
tls: 'empty',
options: {
},
filename: '[name].js',//文件名
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
5、webpack.base.conf.js

webpack.base.conf.js是付出和临盆一块利用建议来的根基配置文件,首要实现配制入口,配置输出景况,配置模块resolve和插件等。

6、webpack.dev.conf.js

 

'use strict'

 

 

const utils = require('./utils')

 

 

const webpack = require('webpack')

 

 

const config = require('../config')

 

 

//通过webpack-merge实现webpack.dev.conf.js对wepack.base.config.js的继承

 

 

const merge = require('webpack-merge')

 

 

const path = require('path')

 

 

const baseWebpackConfig = require('./webpack.base.conf')

 

 

const CopyWebpackPlugin = require('copy-webpack-plugin')

 

 

const HtmlWebpackPlugin = require('html-webpack-plugin')

 

 

//美化webpack的错误信息和日志的插件①

 

 

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

 

 

const portfinder = require('portfinder')// 查看空闲端口位置,默认情况下搜索8000这个端口②

 

 

const HOST = process.env.HOST//③processs为node的一个全局对象获取当前程序的环境变量,即host

 

 

const PORT = process.env.PORT && Number(process.env.PORT)

 

 

const devWebpackConfig = merge(baseWebpackConfig, {

 

 

module: {

 

 

//规则是工具utils中处理出来的styleLoaders,生成了css,less,postcss等规则

 

 

rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

 

 

},

 

 

devtool: config.dev.devtool,  //增强调试,上文有提及

 

 

//此处的配置都是在config的index.js中设定好了

 

 

devServer: {//④

 

 

clientLogLevel: 'warning',//控制台显示的选项有none, error, warning 或者 info

 

 

//当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html

 

 

historyApiFallback: {

 

 

rewrites: [

 

 

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

 

 

],

 

 

},

 

 

hot: true,//热加载

 

 

contentBase: false,

 

 

compress: true,//压缩

 

 

host: HOST || config.dev.host,

 

 

port: PORT || config.dev.port,

 

 

open: config.dev.autoOpenBrowser,//调试时自动打开浏览器

 

 

overlay: config.dev.errorOverlay

 

 

? { warnings: false, errors: true }

 

 

: false,// warning 和 error 都要显示

 

 

publicPath: config.dev.assetsPublicPath,

 

 

proxy: config.dev.proxyTable,//接口代理

 

 

quiet: true, //控制台是否禁止打印警告和错误,若用FriendlyErrorsPlugin 此处为 true

 

 

watchOptions: {

 

 

poll: config.dev.poll,//// 文件系统检测改动

 

 

}

 

 

},

 

 

plugins: [

 

 

new webpack.DefinePlugin({

 

 

'process.env': require('../config/dev.env')

 

 

}),

 

 

new webpack.HotModuleReplacementPlugin(),//⑤模块热替换插件,修改模块时不需要刷新页面

 

 

new webpack.NamedModulesPlugin(), // 显示文件的正确名字

 

 

new webpack.NoEmitOnErrorsPlugin(),//当webpack编译错误的时候,来中端打包进程,防止错误代码打包到文件中

 

 

// https://github.com/ampedandwired/html-webpack-plugin

 

 

// 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去⑥

 

 

new HtmlWebpackPlugin({

 

 

filename: 'index.html',

 

 

template: 'index.html',

 

 

inject: true

 

 

}),

 

 

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.getPort((err, port) => {

 

 

if (err) {

 

 

reject(err)

 

 

} else {

 

 

//端口被占用时就重新设置evn和devServer的端口

 

 

process.env.PORT = port

 

 

devWebpackConfig.devServer.port = port

 

 

``//友好地输出信息

 

 

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

 

 

compilationSuccessInfo: {

 

 

messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],

 

 

},

 

 

onErrors: config.dev.notifyOnErrors

 

 

? utils.createNotifierCallback()

 

 

: undefined

 

 

}))

 

 

resolve(devWebpackConfig)

 

 

}

 

 

})

 

})

path: config.build.assetsRoot,//路径
{
4、src内文件

大家付出的代码都寄放在src目录下,依据要求大家平常会再建一些文本夹。举个例子pages的文件夹,用来贮存页面让components文件夹特意做好组件的做事;api文件夹,来封装央浼的参数和章程;store文件夹,使用vuex来作为vue的意况管理工科具,小编也常叫它作前端的数据库等。

①、assets文件:脚手架自动回归入三个图片在其间作为起始页面包车型客车logo。常常大家使用的时候会在里头创建js,css,img,fonts等公事夹,作为静态能源调用

②、components文件夹:用来贮存在组件,合理地使用组件能够长足地得以完毕复用等职能,进而更加好地开辟项目。日常情况下比如创立底部组件的时候,大家会新建叁个header的公文夹,然后再新建一个header.vue的文件夹

③、router文件夹:该公文夹下有一个叫index.js文件,用于落到实处页面包车型地铁路由跳转

④、App.vue:作为大家的主组件,可透过采用开归入口让任何的页面组件得以显示。

⑤、main.js:作为我们的进口文件,主要职能是开端化vue实例并行使要求的插件,Mini项目省略router时可放在该处

//创建路径的别名,比如增加'components': resolve('src/components')等
const utils = require('./utils')
module: {
{
]
options: vueLoaderConfig

二、主体布局

彩世界网址 6

//自动的扩展后缀,比如一个js文件,则引用时书写可不要写.js
setImmediate: false,
child_process: 'empty'
//使用vue-loader将vue文件转化成js的模块①
'vue$': 'vue/dist/vue.esm.js',
context: path.resolve(__dirname, '../'),
2、.postcssrc.js

.postcssrc.js文件其实是postcss-loader包的一个布局,在webpack的旧版本可以间接在webpack.config.js中安排,现版本中postcss的文书档案示例独立出.postcssrc.js,里面写进去须求动用到的插件。

 

module.exports = {

 

 

"plugins": {

 

 

"postcss-import": {},

 

 

"postcss-url": {},

 

 

"autoprefixer": {}

 

 

}

 

}

 

},
limit: 10000,

三、config文件夹

彩世界网址 7

 

 

: config.dev.assetsPublicPath//公共存放路径
}
publicPath: process.env.NODE_ENV === 'production'
loader: 'url-loader',
//配置入口,默认为单页面所以只有app一个入口
2、build/check-version.js

该公文用于检验node和npm的版本,完成版本注重

//path.join('/a', '/b') // 'a/b',path.resolve('/a', '/b') // '/b'
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
}
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
fs: 'empty',
}
resolve: {
node:
'use strict'
//以下选项是Node.js全局变量或模块,这里主要是防止webpack注入一些Node.js的东西到vue中
}
}
alias: {
extensions: ['.js', '.vue', '.json'],
return path.join(__dirname, '..', dir)
loader: 'vue-loader',

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue-cli 结构【彩世界网址】

关键词: