美文网首页
wepack从0开始配置vue环境之二: 线上部署配置优化

wepack从0开始配置vue环境之二: 线上部署配置优化

作者: 胖太_91bf | 来源:发表于2018-04-05 07:59 被阅读0次

wepack从0开始配置vue环境之一:基础配置
webpack之三集成vuex和vue-Router

  • 调整目录结构

新建/build存放webpack配置文件
build目录下新建文件:

  1. webpack.config.base.js(以下简称base) -> 基础配置文件
    复制/webpack.config.js文件到base, 删除isDev判断环境的代码, 删除所有的插件
  2. webpack.config.client.js(以下简称client) -> 客户端配置文件
    使用webpack-merge: cnpm i webpack-merge -D, 扩展base文件
    复制/webpack.config.js文件到client, 引入base, 删掉config, 引入webpack-merge, 声明一个config, 在两个不同的环境使用merge配置不同的参数,优化静态资源目录等
  3. 修改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",
  1. 调整业务代码存放文件的目录结构,每个部分单独创建文件夹,将src文件夹更名为client
  • vue-loader的配置

  1. 新建/build/vue-loader.config.js, module.exports 一个function, 为了判断环境
  2. 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

  1. 安装模块:

eslint, eslint-config-standard, eslint-plugin-standard, eslint-plugin-promise, eslint-plugin-import, eslint-plugin-node, eslint-plugin-html
备注* 这些模板全部通过npm安装

  1. 新建/.eslintrc文件对eslint进行配置, 另eslint识别.vue里的template内容, 需要添加eslint-plugin-html
{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}
  1. 在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 配置

说明: 统一编辑器配置的, 因为每个编辑器都有自己的默认配置

  1. 新建/.editorconfig
  2. 配置.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 // 清除一行结尾的空格
  1. 安装EditorConfig插件
  • git的precommit - 在commit之前进行eslint检查, 不通过不会提交

安装模块: husky -> git hook, 在安装之前一定要有.git目录, 安装之后会自动在.git里生成hook, 在commit之前执行 precommit命令

  1. 安装husky
  2. 在package.json的script里添加precommit命令
"precommit": "npm run lint-fix"
  1. git commit -m "xx", commit之后会先执行precommit里的命令, 报错就不会提交

相关文章

网友评论

      本文标题:wepack从0开始配置vue环境之二: 线上部署配置优化

      本文链接:https://www.haomeiwen.com/subject/ijrrhftx.html