本文承接
webpack2教程以及webpack2教程续之自动编译，本文所说的项目目录依旧是webpack2
在上两篇中，我们搭建了基于webpack的vue开发环境，并且启动了监听文件修改自动打包编译
现在我们进入更重要的一环，语法规范，借助于工具ESLint
ESLint
点击这里，前往ESLint官网
点击这里，前往ESLint中文网
下面引用自官网
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具，它是一个以可扩展、每条规则独立、不内置编码风格为理念编写的一个lint工具
点击这里，查看所有规则列表
所有的规则默认都是禁用的。在配置文件中，使用"extends": "eslint:recommended"来启用推荐的规则
安装和配置
安装eslint以及对应的加载器
npm i eslint eslint-loader -S
安装eslint预定义配置规则
- eslint-config-standard // 依赖下面四个
- eslint-plugin-import
- eslint-plugin-node
- eslint-plugin-promise
- eslint-plugin-standard
npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -S
安装可以检测vue单组件中的script的工具
npm i eslint-plugin-html -S
安装检测结果格式化工具
npm i eslint-friendly-formatter -S
增加配置文件
在项目根目录新增文件.eslintrc.js
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
extends: 'standard',
// 支持检测vue文件中的script
plugins: [
'html'
],
// 自定义规则再次添加
'rules': {
// 箭头函数只有一个参数时，可以省略圆括号
'arrow-parens': 0,
// 关闭不必要的转义字符通知
'no-useless-escape': 0
}
}
修改webpack的配置文件
配置webpack，对js和vue文件进行规范检测
module.exports = {
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
cache: true,
formatter: require('eslint-friendly-formatter')
}
},
{
enforce: 'pre',
test: /\.vue$/,
loader: 'eslint-loader',
options: {
cache: true,
formatter: require('eslint-friendly-formatter')
}
}
]
}
}
下面是完整的webpack配置文件
var path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: {
main: './src/main.js'
},
resolve: {
// 自动解析确定的扩展
extensions: ['.js', '.vue'],
// 告诉 webpack 解析模块时应该搜索的目录
modules: [
path.resolve(__dirname, 'src'),
'node_modules'
],
alias: {
'src': path.resolve(__dirname, './src')
}
},
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.resolve(__dirname, './dist'),
// 资源基础路径
publicPath: '/dist/',
// 打包输出的文件名
filename: 'build.js'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
cache: true,
formatter: require('eslint-friendly-formatter')
}
},
{
enforce: 'pre',
test: /\.vue$/,
loader: 'eslint-loader',
options: {
cache: true,
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
{
test: /\.css$/,
/*
use: [
'style-loader',
'css-loader'
]
*/
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize'
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: "css-loader?minimize" },
{ loader: "less-loader" }
]
})
},
{
// 处理图片文件
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/images/[name].[ext]'
}
},
{
// 处理字体文件
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/fonts/[name].[ext]'
}
}
]
},
plugins: [
// https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
]
}
最后
// 启动webpack的时候会自动进行js规范检测
webpack --color --progress
