wepack从0开始配置vue环境之一:基础配置
webpack之三集成vuex和vue-Router
-
调整目录结构
新建/build存放webpack配置文件
build目录下新建文件:
- webpack.config.base.js(以下简称base) -> 基础配置文件
复制/webpack.config.js文件到base, 删除isDev判断环境的代码, 删除所有的插件 - webpack.config.client.js(以下简称client) -> 客户端配置文件
使用webpack-merge:cnpm i webpack-merge -D, 扩展base文件
复制/webpack.config.js文件到client, 引入base, 删掉config, 引入webpack-merge, 声明一个config, 在两个不同的环境使用merge配置不同的参数,优化静态资源目录等 - 修改package.json的script命令
"build": "cross-env NODE_ENV=prodution npm run clean && webpack --config build/webpack.config.client.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
- 调整业务代码存放文件的目录结构,每个部分单独创建文件夹,将src文件夹更名为client
-
vue-loader的配置
- 新建/build/vue-loader.config.js, module.exports 一个function, 为了判断环境
- vue-loader配置项:
--preserveWhitespace: false-> template里一行最后多余的空格会导致编译时出问题, 这个参数设置true可以忽略空格
--extractCSS: true-> 将.vue文件里的css单独打包成css文件
--cssModules{}-> css模块化, cssModules.localIdentName和camelCase: true(将css中用 '-' 连接的转化为驼峰)
cssModules: {
localIdentName: '[path]-[name]--[local]--[hash:base64:5]',
camelCase: true
}
在.vue文件中使用
1.
<template>
<div :class="a.header">我是header</div>
</template>
<style lang="stylus" scoped module="a">
.header
color: #f00
</style>
2.
<template>
<div :class="$style.header">我是header</div>
</template>
<style lang="stylus" scoped module>
.header
color: #f00
</style>
css-loader也可以定义cssModules, 定义之后就必须以模块的方式引入css, 使用也类似rn里的css用 '.'访问
{
loader: 'css-loader',
options: {
module: true,
localIdentName: isDev ? '[path]-[name]--[local]--[hash:base64:5]' : '[name]-[hash:base64:5]'
}
}
-- hotReload:false -> 禁用热重载, 这个选项是默认根据环境变量改变的, 不需单独设置
-- loaders: {'docs': docsLoader} -> .vue文件里自定义模块做自定义loader, 就是类似于<template>, <script>
-- preLoader: {js: zjdeloader} -> 先用这里的loader解析一遍在用webpack里的loader解析
-
eslint的配置
忽略eslint的方法, 忽略某行, 在对应行的末尾写上 // eslint-disable-line
- 安装模块:
eslint, eslint-config-standard, eslint-plugin-standard, eslint-plugin-promise, eslint-plugin-import, eslint-plugin-node, eslint-plugin-html
备注* 这些模板全部通过npm安装
- 新建/.eslintrc文件对eslint进行配置, 另eslint识别.vue里的template内容, 需要添加eslint-plugin-html
{
"extends": "standard",
"plugins": [
"html"
]
}
- 在package.json的script中添加lint命令
// 检查代码格式错误
"lint": "eslint --ext .js --ext .jsx --ext .vue client/" // `--ext`代表文件后缀, 最后的`client/`代表检查哪个目录下的文件
// 修正代码格式错误
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
-
使用eslint实时检测代码格式
安装模块: eslint-loader babel-eslint -> webpack的项目要经过babel处理, 普通的eslint会有冲突需要在parse选项里使用一下
配置/eslintrc
{
"extends": "standard",
"plugins": ["html"],
"parser": "babel-eslint",
"rules": "off"
}
}
配置webpack.config.base.js, 添加eslint-loader
{
test: /\.(vue|jsx|js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre' // 在其他loader之前先解析, 不过就不会在进行其他loader解析了
}
-
编辑器的
.editorconfig配置
说明: 统一编辑器配置的, 因为每个编辑器都有自己的默认配置
- 新建/.editorconfig
- 配置.editorconfig文件
科普:end_of_line(行结束符)3种不同的值,
lf -> linux crlf -> win cr -> mac
CRLF 是carriagereturnlinefeed的缩写。中文意思是回车换行。
LF是line feed的缩写，中文意思是换行。
CR是carriagereturn的缩写, 中文是回车
root = true
[*]
charset = utf-8 // 编码格式utf-8
end_of_line = lf // 因为线上环境是linux, 所有都设置成lf
indent_size = 2 // tab缩进格数
indent_style = space // 空格缩进
insert_final_newline = true // 保存时在最后插入一行空行
trim_trailing_whitespace = true // 清除一行结尾的空格
- 安装EditorConfig插件
-
git的precommit - 在commit之前进行eslint检查, 不通过不会提交
安装模块: husky -> git hook, 在安装之前一定要有.git目录, 安装之后会自动在.git里生成hook, 在commit之前执行 precommit命令
- 安装husky
- 在package.json的script里添加precommit命令
"precommit": "npm run lint-fix"
- git commit -m "xx", commit之后会先执行precommit里的命令, 报错就不会提交
