Vue+Webpack的前端工作流搭建
vue-loader配置
/build/vue-loader.config.js
const docsLoader = require('./doc-loader')
exports.defaule = () => {
return {
preserveWhitepace: true, //去除html标签最后的空格
cssModules: { //???没生效???
localIdentName: '[path]-[name]-[hash:base64:5]',
cameCase: true
},
hotReload: true, //热重载功能
loaders: { //自定义模块
'docs': docsLoader
}
}
}
/build/webpack.config.base.js
const createVueLoaderOptions = require('./vue-loader.config')
const isDev = process.env.NODE_ENV === 'development'
const config = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: createVueLoaderOptions(isDev)
}
]
}
}
eslint配置
/.eslintrc
{
"extends": ["plugin:vue/essential","standard"],
"plugins": [
"html",
"vue"
],
"parserOptions": {
"parser": "babel-eslint"
}
}
/build/webpack.config.base.js
const config = {
module: {
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
}
]
}
}
editorconfig配置
/.editorconfig
//编辑器 需要安装插件EditorConfig
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
ident_style = space
insert_final_newline = true
trim_trailing_whitespace = true
husky:代码commit验证
npm i husky -D
package.json配置
插件安装
npm i rimraf -D
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
npm i eslint-plugin-html eslint-plugin-vue -D
npm i eslint-loader babel-eslint -D
npm i husky -D
package.json
{
"scripts": {
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"clean": "rimraf dist",
"build": "npm run clean && npm run build:client",
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
"precommit": "npm run lint-fix"
}
}
==============================================
vue-style-loader有css样式热重载功能。