wepack從0開始配置vue環(huán)境之一:基礎配置
webpack之三集成vuex和vue-Router
-
調(diào)整目錄結(jié)構
新建/build存放webpack配置文件
build目錄下新建文件:
- webpack.config.base.js(以下簡稱base) -> 基礎配置文件
復制/webpack.config.js文件到base, 刪除isDev判斷環(huán)境的代碼, 刪除所有的插件 - webpack.config.client.js(以下簡稱client) -> 客戶端配置文件
使用webpack-merge:cnpm i webpack-merge -D, 擴展base文件
復制/webpack.config.js文件到client, 引入base, 刪掉config, 引入webpack-merge, 聲明一個config, 在兩個不同的環(huán)境使用merge配置不同的參數(shù),優(yōu)化靜態(tài)資源目錄等 - 修改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",
- 調(diào)整業(yè)務代碼存放文件的目錄結(jié)構,每個部分單獨創(chuàng)建文件夾,將src文件夾更名為client
-
vue-loader的配置
- 新建/build/vue-loader.config.js, module.exports 一個function, 為了判斷環(huán)境
- vue-loader配置項:
--preserveWhitespace: false-> template里一行最后多余的空格會導致編譯時出問題, 這個參數(shù)設置true可以忽略空格
--extractCSS: true-> 將.vue文件里的css單獨打包成css文件
--cssModules{}-> css模塊化, cssModules.localIdentName和camelCase: true(將css中用 '-' 連接的轉(zhuǎn)化為駝峰)
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 -> 禁用熱重載, 這個選項是默認根據(jù)環(huán)境變量改變的, 不需單獨設置
-- 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內(nèi)容, 需要添加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的項目要經(jīng)過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配置
說明: 統(tǒng)一編輯器配置的, 因為每個編輯器都有自己的默認配置
- 新建/.editorconfig
- 配置.editorconfig文件
科普:end_of_line(行結(jié)束符)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 // 因為線上環(huán)境是linux, 所有都設置成lf
indent_size = 2 // tab縮進格數(shù)
indent_style = space // 空格縮進
insert_final_newline = true // 保存時在最后插入一行空行
trim_trailing_whitespace = true // 清除一行結(jié)尾的空格
- 安裝EditorConfig插件
-
git的precommit - 在commit之前進行eslint檢查, 不通過不會提交
安裝模塊: husky -> git hook, 在安裝之前一定要有.git目錄, 安裝之后會自動在.git里生成hook, 在commit之前執(zhí)行 precommit命令
- 安裝husky
- 在package.json的script里添加precommit命令
"precommit": "npm run lint-fix"
- git commit -m "xx", commit之后會先執(zhí)行precommit里的命令, 報錯就不會提交
