目录
7. webpack + vue项目配置文件详解
学习一个东西我们可以使用 5w1h的方式:
概念 | |
---|---|
why | 为什么要学习这个东西 |
what | 要学的东西是什么 |
who | 这个东西谁来用 |
when | 什么时候用 |
where | 在哪里用 |
how | 怎么用 |
如此,我们便能对想要学习的东西有一个清晰的认识
7.1 package.json
why:
7.1.1 name:名称字段;version:版本号
概念:名称字段就相当于名字,如果作为要发布的程序包,那么名称字段和版本字段都是必填的,两者共同构成一个唯一标识符;否则两者只是可选字段;
注意::名称 <= 214个字符,不能以 “.” 或 “_” 开头,不能有大写字母,必须是URL允许的字符,不能使用node已使用的(类似关键字);
7.1.2 description:描述;
概念:可以在其中添加对本程序包的描述,这是一个字符串,而且可以帮助我们使用 npm search 来查找我们想要功能的包;
7.1.3 author:作者
7.1.4 private:
概念:如果在package.json中设置"private": true,则npm将拒绝发布它,这样是为了防止意外发布私有库方法;
7.1.5 scripts:脚本
概念:scripts是一个字典,包含在包运行生命周期各个时间段运行的脚本命令,简单来说,scripts里包含的key-value对中,key代表事件(代名词),value代表运行的命令;
7.1.6 dependencies:项目依赖
概念:dependencies是一个简单的用来匹配包名
和版本范围
的项目,其中之所以叫版本范围,是因为这里的 value 字符串不只是可以填写如 “1.1.0” 这样的单一版本号(常用),还可以是由符号标识或空格描述的字符串,也可以是压缩包或git URL ;
这里我们要区分dependencies和devDependencies,dependencies是配置项目运行所必须的依赖,即生产环境依赖,devDependencies则是配置测试打包等依赖,即开发环境依赖;通过npm install --save moduleName
命令即可将要安装的模块信息写入项目依赖中;npm install
则会将生产和开发依赖都下载下来。
版本范围格式 | 含义 |
---|---|
version | 必须version完全匹配 |
>version | 必须大于 version |
>=version | |
<version | |
<=version | |
~version | 大约等同于版本(详见下方示例代码) |
^version | 与版本兼容(详见下方示例代码) |
1.2.x | |
http://… | URL作为依赖(详见下方示例代码) |
* | 匹配任何版本 |
“” | (只是一个空字符串)与 * 一样 |
version1 - version2 | >=version1 <=version2 |
range1 || range2 | 如果满足range1或range2,则通过 |
git… | Git URL作为依赖 |
user/repo | |
tag | A specific version tagged and published as tag See npm-dist-tag |
path/path/path | 请参阅下面的本地路径 |
"dependencies": {
"foo": "1.0.0 - 2.9999.9999",
"bar": ">=1.0.2 <2.1.2",
"baz": ">1.0.2 <=2.3.4",
"boo": "2.0.1",
"qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
"asd": "http://asdf.com/asdf.tar.gz", //http路径
"til": "~1.2", //等于~1.2.0,与1.2.x相同
"elf": "~1.2.3", //与1.2.x相同
"test":"~1", //等于~1.0.0,与1.x相同
"two": "2.x",
"thr": "3.3.x",
"lat": "latest",
"dyl": "file:../dyl" //本地路径
}
Git URL作为依赖项,Git网址的格式为:
<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]
<protocol>
是以下之一git,git+ssh,git+http,git+https,或 git+file。
如果#提供,它将用于精确克隆该提交。如果commit-ish的格式为#semver:,则可以是任何有效的semver范围或确切版本,并且npm会在远程存储库中查找与该范围匹配的任何标记或引用,这与注册表依赖项很相似。如果未指定#或#semver:,则master使用。
例子:
git+ssh://git@github.com:npm/cli.git#v1.0.27
git+ssh://git@github.com:npm/cli#semver:^5.0
git+https://isaacs@github.com/npm/cli.git
git://github.com/npm/cli.git#v1.0.27
7.1.7 devDependencies:仅用于开发中的依赖
概念:开发中使用的打包测试等工具,并不需要其他人使用此项目是同样下载,所以放在此代码块中,里面的key-value用法和dependencies相似,使用npm install --save-dev moduleName
命令即可将要安装的模块信息写入开发依赖中;
7.1.8 engines:引擎版本
概念:这里用来指定引擎版本,通常是node和npm,value值即版本可以像dependencies中一样;
7.1.9 browserslist:浏览器版本控制
"browserslist": [ //注意这是一个数组对象
"> 1%", //全球>1%的人使用
"last 2 versions", //最新两个版本内
"not ie <= 8" //ie版本不能 <= 8
]
7.1.10 package.json模板
{
"name": "xc-ui-pc-sysmanage",
"version": "1.0.0",
"description": "xc-ui-pc-sysmanage",
"author": "mrt",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.16.2",
"cnpm": "^5.2.0",
"echarts": "^3.3.2",
"element-ui": "^2.0.10",
"js-base64": "^2.4.3",
"js-md5": "^0.7.3",
"jwt-decode": "^2.2.0",
"mint-ui": "^2.2.3",
"moment": "^2.18.1",
"postcss": "^6.0.21",
"postcss-url": "^7.3.1",
"vue": "^2.5.2",
"vue-resource": "^1.3.0",
"vue-router": "^3.0.1",
"vuex": "^2.0.0-rc.6"
},
"devDependencies": {
"autoprefixer": "^7.2.6",
"axios-mock-adapter": "^1.7.1",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.1",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.35.0",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.0",
"jest-serializer-vue": "^0.3.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"mockjs": "^1.0.1-beta3",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.3",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
7.2 webpack.base.conf.js
常用解析如下,请细细阅读(可通过左右箭头滑动查看代码)
webpack.base.conf.js通常是用来配置入口、出口文件及路径,简化文件/模块的引用,loader。
'use strict' //使用js严格模式
//引入模块
//require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象。如果没有发现指定模块,会报错。
//const定义的变量不可以修改,而且必须初始化,如果用var就不必一定初始化
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// 获取根目录的方法
function resolve (dir) {
return path.join(__dirname, '..', dir) //__dirname :获得当前执行文件所在目录的完整目录名,即如果main.js调用,那么__dirname就是main.js的绝对路径
} //path.join (只连接,不解析,形成路径)将路径片段使用特定的分隔符(如\)连接起来形成路径,并规范化生成的路径
//声明模块要暴露的内容
//module.exports 对象是由模块系统创建的,在我们写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports提供了暴露接口的方法
module.exports = {
context: path.resolve(__dirname, '../'), //context所设置的路径,就是给entry提供路径前部分拼接;path.resolve (连接并解析,形成绝对路径),从右往左解析拼接
//解析:如果当前路径以"/"开头,则不会拼接前面的路径,因为"/"已经是绝对路径;如果以"./"或不带符号开头,则拼接前面的路径;如果以"../"开头,则拼接前面路径的同时,去掉前面路径的最后一节路径
//定义入口文件
entry: {
app: './src/main.js' //这里我们只用拼接context提供的路径前段,加上app的value值提供的后段
}, //例如,调用文件为main.js,那么context就是 根目录/src - src = 根目录,app实际目录就是 根目录/src/main.js
//定义输出路径
output: {
//webpack输出的目标文件夹路径
path: config.build.assetsRoot,
//webpack输出bundle文件命名格式
filename: '[name].js',
// 静态资源路径,分下列两种情况
// 在开发环境下,路径为根目录
// 在生产环境下,路径为根目录下的static文件夹
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
//resolve 配置 Webpack 如何寻找模块所对应的文件
resolve: {
//自动解析扩展名,以下扩展名的文件引用时不用写扩展名
extensions: ['.js', '.vue', '.json'],
//配置别名,避免在结构嵌套过深的情况下出现../../../../xxx这种写法,方便引用
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/statics/css/vars.scss'
}
},
//module 配置如何处理模块
module: {
//配置模块的读取和解析规则,通常用来配置 Loader
rules: [ //rules是一个数组
// ...(config.dev.useEslint? [{
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
// }] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
// 对于图片资源,当文件体积小于10kb时,将其生成为base64,直接插入html中
// 当大于10kb时,将图片名称进行按照命名规则进行更改
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]')
}
}
]
}
}