webpack(11)配置eslint语法检查
1.使用eslint-loader对js文件进行语法检查，eslint-loader可以配置很多种不同的语法检查规则，这里使用airbnb-base语法规则进行检查
2.安装包：npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
3.在package.json中新增项，eslint-loader会找这个项来确定语法检查规则：
"eslintConfig":{
"extends":"airbnb-base"//表示配置的检查规则是airbnb-base
}
4.在webpack.config.js文件中配置使用eslint-loader：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
publichPath:'./images',
outputPath:'images/',
limit:1024*16,
name:'[name].[ext]'
}}]},
{test: /\.(html)$/, use:['html-loader']},
{exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{
publichPath:'./svg',
outputPath:'svg/',
name:'[name].[ext]'
}}]},
{
test:/\.js$/,//表示只处理js文件
exclude:/node_modules/,//表示node_modules中的js文件不进行语法检查，因为node_modules文件夹中都是下载的包，一般不进行检查
loader:'eslint-loader',
options:{
fix:true//这个选项表示启动自动修复功能，如果缺少空格换行之类的。如果不启用这个所有的这些问题都为报错，一个个的修改起来比较繁琐
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
]
}
