cli项目布局讲解,脚手架中

By admin in 4858美高梅 on 2019年4月4日

一、前言

vue-cli是创设vue单页应用的脚手架,输入一串钦赐的吩咐行从而自动生成vue.js+wepack的花色模板。这么些中webpack发挥了一点都不小的效果,它使得大家的代码模块化,引入1些插件帮我们全面职能能够将文件打包压缩,图片转base6四等。早先时期对项指标布署使得我们对此脚手架自动生成的代码的敞亮更为主要,接下去本人将依据webpack3.6.0版本结合文书档案将文件相继击破,纯干料。

.

|–
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                     //
项目为主消息

 

 

package.json

4858美高梅 1

package.json.png

npm run dev运营的就是 build/dev-server.js以此文件

参照链接:

二、主体结构

4858美高梅 2

主要文件package.json

ackage.json文件是连串根目录下的多少个文书,定义该项目支付所需求的各个模块以及部分项目布局消息(如项目名称、版本、描述、小编等)。

package.json
里的scripts字段,那么些字段定义了您能够用npm运营的指令。在付出环境下,在命令行工具中运作npm
run dev 就一定于实践 node build/dev-server.js
 .也正是翻开了3个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还有许多皮之不存毛将焉附配置

dev-server.js

4858美高梅 3

dev-server.js.png

config对运作时和费用时的1对配备
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中装置

vue-cli脚手架工具正是为大家搭建了支出所须求的环境,为我们省去了过多生气!!!

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"

 

 

]

 

 

}

注释:

  • 壹、devDependencies和dependencies的界别:
    devDependencies里面包车型客车插件只用于支付环境,不用于生产条件,即匡助作用,打包的时候需求,打包实现就不须求了。而dependencies是亟需透露到生产条件的,自始至终都在。比如wepack等只是在支付中央银行使的包就写入到devDependencies,而像vue那种类型全程注重的包要写入到devDependencies。

  • 2、file-loader和url-loader的区分:以图片为例,file-loader可对图纸展开压缩,不过照旧通过文件路径实行引入,当http请求增多时会下落页面品质,而url-loader通过设定limit参数,小于limit字节的图形会被转成base6肆的文书,大于limit字节的将开始展览图纸压缩的操作。简单的讲,url-loader是file-loader的上层封装。

webpack配置相关

大家在地点说了运维npm run dev 就一定于实践了node
build/dev-server.js,表达这些文件卓殊重大,先来熟习一下它。 

webpack.dev.conf配置文件

4858美高梅 4

webpack.dev.conf.png

merge用来统一配置文件
utils是一些工具和格局
baseWebpackConfig是运作时的片段安顿文件被支付和平运动转共享的配置
HtmlwebpackPluginwebpack提供操作html的壹些插件

 

2、.postcssrc.js

.postcssrc.js文件其实是postcss-loader包的3个配置,在webpack的旧版本能够从来在webpack.config.js中配备,现版本中postcss的文书档案示例独立出.postcssrc.js,里面写进去供给选用到的插件。

 

module.exports = {

 

 

"plugins": {

 

 

"postcss-import": {},

 

 

"postcss-url": {},

 

 

"autoprefixer": {}

 

 

}

 

}

 

dev-server.js

webpack.base.conf.js

4858美高梅 5

webpack.base.conf.js.png

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

 

3、 .babelrc

 

该文件是es五分析的三个安顿。

 

{

 

 

//制定转码的规则

 

 

"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"]//①

 

}

// 检查 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_4858美高梅,ENV)

 

// 使用 NodeJS 自带的文件路径工具

var path = require(‘path’)

 

// 使用 express

var express = require(‘express’)

 

// 使用 webpack

var webpack = require(‘webpack’)

 

// 1个足以强制打开浏览器并跳转到内定 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 运行2个劳动

var app = express()

 

// 运营 webpack 举办编写翻译

var compiler = webpack(webpackConfig)

cli项目布局讲解,脚手架中。 

// 运转 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)

  }

})

 

 

 

骨架

├── 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&e二e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

.

4、src内文件

大家付出的代码都存放在src目录下,依据要求我们常常会再建1些文书夹。比如pages的文件夹,用来存放页面让components文件夹专门做好组件的办事;api文件夹,来封装请求的参数和艺术;store文件夹,使用vuex来作为vue的图景管理工科具,作者也常叫它作前端的数据库等。

一、assets文件:脚手架自动回看入贰个图纸在内部作为开首页面包车型大巴logo。日常大家应用的时候会在个中国建工业总会公司立js,css,img,fonts等文件夹,作为静态能源调用

2、components文件夹:用来存放在组件,合理地动用组件能够飞速地促成复用等职能,从而更好地付出项目。一般情状下比如创制尾部组件的时候,大家会新建贰个header的文书夹,然后再新建1个header.vue的文本夹

叁、router文件夹:该文件夹下有2个叫index.js文件,用于落到实处页面包车型客车路由跳转

四、App.vue:作为我们的主组件,可透过接纳开放入口让任何的页面组件得以突显。

5、main.js:作为大家的进口文件,主要职能是初步化vue实例并使用要求的插件,小型项目省略router时可放在该处

webpack.base.confg.js   webpack的基础配置文件

module.export
= {

    //
编写翻译入口文件

    entry: {},

    //
编译输出路径

    output: {},

    //
1些缓解方案计划

    resolve: {},

    resolveLoader: {},

    module: {

        //
各类不相同品类文件加载器配置

        loaders: {

        …

        …

        //
js文件用babel转码

        {

            test: /\.js$/,

            loader: ‘babel’,

            include: projectRoot,

            //
哪些文件不需求转码

            exclude: /node_modules/

        },

        …

        …

        }

    },

    //
vue文件一些相关安插

    vue: {}

}

 

|–
build                            //
项目创设(webpack)相关代码

伍、其余文件

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

贰、.gitignore:忽略git提交的三个文书,配置之后提交时将不会加载忽略的文件

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

肆、package.lock.json:锁虞诩装时的包的本子号,并且供给上传到git,以保证别的人在npm
install时大家的注重能保证平等

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

⑥、node_modules:依据package.json安装时候生成的的借助(安装包)

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应用,所以说1般唯有八个html文件。
  • static 静态能源文件夹:里边js、CSS和局部图形。

|   |– build.js                     //
生产环境营造代码

三、config文件夹

4858美高梅 6

 

 

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

1、config/dev.env.js

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

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

module.exports = merge(prodEnv, {

 

 

NODE_ENV: '"development"'

 

})

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

2、config/prod.env.js

当开发是调取dev.env.js的开发条件安排,发布时调用prod.env.js的生育环境陈设。

 

'use strict'

 

 

module.exports = {

 

 

NODE_ENV: '"production"'

 

}

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

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

 

 

}

 

}

|   |– utils.js                     //
营造筑工程具相关

四、build文件夹

4858美高梅 7

 

 

|   |– webpack.base.conf.js         // webpack基础配置

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

 

 

}) + '\n\n')

 

 

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'

 

 

))

 

 

})

 

})

|   |– webpack.dev.conf.js          // webpack开发环境计划

2、build/check-version.js

该文件用于检查评定node和npm的本子,完成版本重视

|   |– webpack.prod.conf.js         // webpack生产环境安插

3、build/utils.js

utils是工具的情致,是3个用来处理css的公文。

注释:

  • path.posix:提供对路线方法的POSIX(可移植性操作系统接口)特定完结的拜访,即可跨平台,不一样于win3贰。

  • path.join:用于连接路径,会不错利用当前系统的门道分隔符,Unix系统是”/”,Windows系统是”\”

|–
config                           //
项目支付环境布署

4、vue-loader.conf.js

该公文的重点作用正是处理.vue文件,解析这一个文件中的每种语言块(template、script、style),转换到js可用的js模块。

|   |– dev.env.js                   //
开发环境变量

5、webpack.base.conf.js

webpack.base.conf.js是付出和生育壹块选用建议来的功底配置文件,主要落成配制入口,配置输出环境,配置模块resolve和插件等。

|   |– index.js                     //
项目有个别布局变量

'use strict'

|   |– prod.env.js                  //
生产环境变量

const path = require('path')

|   |– test.env.js                  //
测试环境变量

const utils = require('./utils')

|–
src                              //
源码目录

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

|   |– components                    
//
vue公共组件

const vueLoaderConfig = require('./vue-loader.conf')

|   |– store                          // vuex的情况管理

function resolve (dir) {

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

//拼接出绝对路径

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

return path.join(__dirname, '..', dir)

|–
static                           //
静态文件,比如某个图片,json数据等

}

|   |– data                          
//
群聊分析获得的数目用于数据可视化

module.exports = {

|–
.babelrc                         // ES陆语法编写翻译配置

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

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

//path.join('/a', '/b') // 'a/b',path.resolve('/a', '/b') // '/b'

|–
.gitignore                       // git上传须要忽略的文件格式

context: path.resolve(__dirname, '../'),

|–
README.md                        //
项目表达

//配置入口,默认为单页面所以只有app一个入口

|–
favicon.ico

entry: {

|–
index.html                       //
入口页面

app: './src/main.js'

|–
package.json                     //
项目基本新闻

},

.

//配置出口,默认是/dist作为目标文件夹的路径
output: {
path: config.build.assetsRoot,//路径
filename: '[name].js',//文件名
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath//公共存放路径
},
resolve: {
//自动的扩展后缀,比如一个js文件,则引用时书写可不要写.js
extensions: ['.js', '.vue', '.json'],
//创建路径的别名,比如增加'components': resolve('src/components')等
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
//使用插件配置相应文件的处理方法
module: {
rules: [
//使用vue-loader将vue文件转化成js的模块①
{
test: /\.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中
node:
setImmediate: false,
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
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)

 

 

}

 

 

})

 

})

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有