安装
// 先初始化项目,创建package用于记录依赖
npm init
// 安装webpack和webpack-cli，-D表示 -dev,开发环境用的包，使用webpack4需要额外安装webpack-cli
npm i webpack@4 webpack-cli -D
五大核心概念
entry：打包入口，支持多入口打包
output：输出，可以配置输入路径，文件名等
loader：webpack只理解javascript语法，loader可以把其他类型的文件如css、less、sass、image、vue等转成js代码。
plugin：负责处理打包优化级相关的事，如设置环境变量、代码压缩等
mode：webpack4特有概念，指开发模式，默认production生产模式，可以设置为development开发模式，不同模式会自动开启一些内置好的plugin。
const { resolve } = require('path')
module.exports = {
mode: 'development', // 默认production，开发环境请使用development
entry: './src/index.js',
output: {
filename: 'bundle.js',
// 这个参数要求绝对路径，因此需要使用node的path模块帮助生成
// __dirname是内置变量指向当前js文件的目录绝对路径
path: resolve(__dirname, 'dist'),
},
// loader配置
module: {
rules: []
},
// plugin配置
plugins: []
}
指定配置文件
默认配置文件名 webpack.config.js
也可以执行命令的时候指定自定义配置文件：webpack --config webpack.config.dev.js
可以在package.js中配置scripts脚本：
"scripts": {
"webpack --config webpack.config.dev.js"
}
js相关
js压缩：
webpack4已经内置了UglifyJsPlugin，只要mode设置成production就可以做压缩。
js兼容性处理：
npm install -D babel-loader @babel/core @babel/preset-env
webpack 4.x || 5.x | babel-loader 8.x | babel 7.x
@babel/core：核心解析库
babel-loader：webpack需要用的loader
@babel/preset-env：loader的预设配置，默认支持基本的语法转换如const，promise这种不支持，需要额外添加配置指定兼容版本
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage', // 按需加载兼容性选项
corejs: {
version: 3,
},
// 指定兼容最低浏览器版本
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17',
},
},
],
],
},
},
动态加载的语法支持：
使用import()来实现动态加载的时候会报如下错误
貌似babel7还不太完善，这里额外下了个core-js包，问题被解决
npm i -D core-js
css相关
css:
npm i -D style-loader@2 css-loader@5
webpack4不要用最新版本，使用file-loader打包图标库报错
// loader配置
module: {
rules: [
{ // 处理css
test: /\.css$/,
// use中配置的loader是倒叙执行的
use: [
'style-loader', // 创建style标签，将js中的css模块插入到页面上
'css-loader', // 将css文件转换成js模块
]
}
]
},
less:
npm i less-loader@7 less -D
注意：less-loader8.0以后就不支持webpack4了
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
css兼容性处理：
npm i -D postcss-loader@4 postcss@8 postcss-preset-env@7
注意postcss-loader从版本5.0以后只支持webpack5
postcss是核心解析api
postcss-loader是webpack需要用的loader
postcss-preset-env是postcss-loader支持的插件，可以配置最低要求浏览器兼容版本，这里是通过package.json上配置browserlist指定具体版本
postcss-loader必须写在css-loader之前，其他样式loader如less-loader后面：
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader, // 替代style-loader，提取css文件为单独文件
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env'
]
}
}
},
'less-loader'
]
},
package.json追加配置：
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
同时需要在webpack.config.js指定当前nodejs环境变量，postcss-preset-env会去取当前执行环境，默认production。
process.env.NODE_ENV = "development"
css提取：
npm i -D mini-css-extract-plugin@1
npm官网
安装的时候注意版本，2.0以后就不支持webpack4了。
css-loader会把引入的css文件转为js和js编码打包在一起，如果希望打包后css单独提取到外部文件并用link标签引入，需要安装插件mini-css-extract-plugin，同时用这个插件自带的loader替代style-loader。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//...
module: {
rules: [
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader, // 替代style-loader，提取css文件为单独文件
'css-loader',
'less-loader'
]
},
{ // 处理css
test: /\.css$/,
// use中配置的loader是倒叙执行的
use: [
// 'style-loader', // 创建style标签，将js中的css模块插入到页面上
MiniCssExtractPlugin.loader, // 替代style-loader，提取css文件为单独文件
'css-loader', // 将css文件转换成js模块
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[hash:8].css'
})
]
这里有时候会遇到这样的问题：
css提取到指定目录后，样式中图片路径会加载不到的问题：
比如url-loader处理后图片加载地址为assets/img/xxx.png,如果MiniCssExtractPlugin.loader配置了publicPath为css，最终图片地址就会变成css/assets/img/xxx.png导致找不到图片，因为assets并不在css目录下，而是在根目录下。通过查看官网例子，得到如下配置方式：// loader... module: { rules: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', }, }, ] } // plugin... plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', }), ]这样可以做到css文件提取到指定目录，同时样式中图片地址不会拼接错误
css压缩：
npm i -D optimize-css-assets-webpack-plugin@6
optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.
webpack4使用optimize-css-assets-webpack-plugin4.0.0及以上的版本
顺带记一下webpack5要使用css-minimizer-webpack-plugin本例使用的是optimize-css-assets-webpack-plugin@6，需要postcss8.0及以上支持
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//...
plugins: [
new OptimizeCssAssetsWebpackPlugin()
]
image
npm i -D url-loader@4 file-loader@6 html-loader@0
webpack4使用老版本html-loader 0.5.5，
新版本需要查看官网html-loader
url-loader依赖file-loader，所以2个都需要安装
url-loader可以处理css中的image
html-loader负责处理html中的image标签，把image标签中的图片转成js模块供url-loader处理，使用html-loader要注意配置url-loader的esModule:false
{
test: /\.(jpg|jpeg|png|gif)$/,
// url-loader依赖file-loader，所以需要安装url-loader和file-loader
use: 'url-loader',
options: {
// 小于8kb就会base64处理，优点是减少请求数，减轻服务端压力，
// 缺点是文件体积会变大，通常12kb以内可以考虑配置
limit: 8 * 1024,
// url-loader默认使用es6模块解析js，但是html-loader解析出来的是commonjs模块，
// 需要如下配置才能正常加载image标签图片资源
esModule: false,
outputPath: "img" // 打包到img目录下
}
},
{
test: /\.html$/,
// html-loader负责处理image标签中的图片路径，负责引入图片让url-loader加载
use: 'html-loader'
}
html相关
html 模板copy：
npm i -D html-webpack-plugin@4
作用：创建html文件，自动引入js/css
版本问题：
报错原因是版本不兼容，最新的html插件已经升级到5，而使用的webpack版本是4
需要指定版本安装html插件：npm i -D html-webpack-plugin@4
const HtmlWebpackPlugin = require('html-webpack-plugin')
//...
// plugin配置
plugins: [
new HtmlWebpackPlugin({
// 默认只会创建空html，template用于复制自定义html，在基础上插入css和js
// 可以创建“app”标签，引入cdn库等
template: './src/index.html'
})
]
html压缩：
需要在HtmlWebpackPlugin中加2个配置项，用于移除空格/空行、移除注释
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true, // 移除空格
removeComments: true, // 移除注释
}
})
]
其他资源打包
字体图标：字体图标是在css中被引入的，需要使用url-loader才能正确解析出地址，可以使用url-loader提取。
{ // 处理字体图标,只会在样式文件中引入，所以使用url-loader提取
test: /\.(eot|svg|ttf|woff|woff2)/,
loader: 'url-loader',
options: {
name: '[name].[contenthash:8].[ext]',
limit: 8 * 1024, // 这个选项需要配置，默认不限制文件大小
outputPath: 'assets/font',
},
},
可以直接入口js引入iconfont.css
import './font/iconfont.css'
根据iconfont.css内容copy对应的字体库文件，整个字体图标目录都copy过来也可以，demo_index.html还可以查看图标样式。
其他文件都可以使用file-loader统一打包到配置的目录下。
{ // 其他文件，没有在样式引入的可以使用file-loader提取到指定目录下
exclude: /\.(html|css|js|less|jpg|jpeg|png|gif|eot|svg|ttf|woff|woff2)/,
loader: 'file-loader',
options: {
name: '[name].[contenthash:8].[ext]',
outputPath: 'assets',
},
},
devServer
npm i -D webpack-dev-server@4
注意使用的版本，这里安装的是4.0以后的版本。需要：node >= v12.13.0、webpack >= v4.37.0，webpack-cli >= v4.7.0
webpack-dev-server文档
v3和v4的差异请参考官方文档webpack-dev-server迁移
devServer打包好的内容会存在内存中，并不会在打包目录中。
//...
devServer: {
// 项目构建后目录
static: {
directory: resolve(__dirname, 'public'),
},
// gzip压缩
compress: true,
port: 3000,
// 自动打开浏览器
open: true,
},
优化项
模块热替换：
模块热替换（HMR）：只改了一处js或者css文件，只重新打包加载这一部分，不要更新整个项目所有模块。
需要处理的文件：
- html：默认不支持，需要刷新整个页面，单页面通常不会修改入口页面，如果使用vue-loader解析组件，会自带hmr功能
- css：style-loader已经支持，所以开发环境使用style-loader，生产环境才提取css
process.env.NODE_ENV = 'development';
const isProductionMode = process.env.NODE_ENV === 'production';
//...
[
isProductionMode ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
]
- js：devserver默认会开启hot选项，但是会刷新所有模块,入口js无法控制，必然会导致全模块刷新，其他js可以通过在入口加一段代码控制，达到hmr功能。
if (module.hot) {
module.hot.accept(['./a.js', './b.js'], (name) => {
console.log(`${name} 被更新`);
});
}
这意味着我们需要维护所有js文件的列表...
好在大多数情况下，我们使用的组件loader自带了hmr功能，如vue-loader、react Hot Loader，因此这个配置基本可以省略。
source-map:
source-map是一种源代码映射技术，可以帮助开发人员快速定位代码错误。
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
//...
devServer:{},
devtool: 'source-map' // 增加源码映射构建
打包方式和调试体验：
- inline-和eval-前缀的source-map会把sourcemap代码构建到bundle.js中。
inline-在bundle中有单独的一块区域存放sourcemap代码；而eval-会在每个依赖文件的eval函数中追加sourcemap代码。排错的体验基本一样。- 除了inline-和eval-前缀的source-map，其他的选项都会在外部生成source-map代码。
- hidden-不会让我们看到源代码，只能看构建后bundle的代码。比较适合生产环境定位代码，需要开发人员对源代码熟悉。
- nosources-也不会让我们看到源代码。
- cheap-和cheap-module-定位的粒度为行，不会具体到哪一句代码。
- 什么前缀都不加也是在外部构建映射代码，调试体验自然是最好的。
调试体验：
source-map > cheap- ...打包速度：
eval > inline > cheap ...
eval-cheap-source-map是最快的常规配置：
开发环境通常使用eval-source-map，react和vue脚手架的默认配置也是这个
如果希望速度更快，可以考虑eval-cheap-module-source-map生产环境需要考虑2个问题：
- 不能使用内联，会使bundle体积变大，因此不能考虑eval-和inline-
- 是否要线上调试代码，如果需要，可以考虑source-map，或者cheap-module-source-map能打包快一些。如果不需要调试，个人觉得就不要配置devtool了，不然会多打个map文件。
更详细说明可以查看webpack-devtool官方文档
oneOf：
优化loader处理效率：对于那些只会被一种loader处理的文件，可以放到oneOf选项内，避免每次都要被所有loader检查一遍。
const oneOfLoaders = [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {}
},
{
{
test: /\.less$/,
use: [
...commonCssLoaders,
'less-loader',
],
},
{ // 处理css
test: /\.css$/,
use: [
...commonCssLoaders,
],
},
}
]
//...
module: {
rules: [
{
test: /\.xxx$/,
enforce: true, // 如果oneOf内部包含了对此类型文件处理，需要加上此项保证先被命中
loader: 'xxx-loader'
},
{
oneOf: [...oneOfLoaders],
},
],
},
缓存：
缓存一般用于生产环境，主要包括2方面：
- babel-loader打包缓存配置：babel-loader会在本地默认一个目录下缓存打包的结果，下次打包的时候会优先读取缓存。更多详细配置可以查看webpack babel-loader文档
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启构建缓存
presets: [
'@babel/preset-env'
]
}
}
- 静态资源缓存：这里主要指通过强制缓存控制js、css、img、字体图标等静态资源缓存，让用户访问页面变得快速。注意html文件不要缓存，静态资源打包输出的文件名要带上contenthash值，这样需要更新文件的时候浏览器就会去下载新的文件而不是用缓存。
可以参考：关于浏览器缓存和nginx配置代理缓存
关于hash的配置：
webpack中，hash有3种：hash、chunkhash、contenthash。
hash：每次构建都会生成一个hash，所有文件共享。这显然不是我们想要的。
chunkhash：属于同一个chunk的文件共享一个chunkhash。就比如一个入口下与入口文件有依赖关系的子文件都属于一个chunk，例如index.js中引入了css文件，那么css文件和index属于一个chunk，即使css后来用插件被提取出去了。
contenthash：这个hash是根据最终输出的文件内容生成的。contenthash可以用于缓存和更新。
tree shaking：
通常我们引入一个js文件，不见得所有的函数和方法都会被引用，有的可能是废弃的代码，tree shaking的作用就是不打包未被引用的方法或对象。
tree shaking的使用很简单：
- 使用import 导入，即es6的模块化语法
- mode设置为production
webpack会自动进行tree shaking。
代码分割(code split)：
如果我们的项目由单页面发展为多页面，就意味着需要多个入口js（html可以共用一个，作为基础模板），比如用户入口，商家入口，管理员入口等。
这时候会遇到重复打包的问题，例如jquery，会被打包进了2个chunk中。
webpack4以后提供了SplitChunksPlugin帮我们完成了这一需求，主要从以下几个角度考虑分割chunk
- 首先node_modules目录中的代码会被直接提取出去，这项功能单页面也适用。
- 引入的模块体积大于限定（默认20k）会被分割成单独chunk
- 按需加载，并发请求过多会被提炼成单独chunk
- 页面初始化，并发请求过多会被提炼单独chunk
常规操作：
// 这样一定会把引用的node_modules中的库抽离到单独的chunk中，
// 其他根据判断规则自动决定是否再抽离chunk
optimization: {
splitChunks: {
chunks: 'all',
},
},
如果你想指定自己的模块被提炼出单独chunk，无视任何条件，可以使用如下的方式：
import(/* webpackChunkName: 'c' */'./c').then(c => {
console.log(c.paipai('fang'));
})
懒加载和预加载：
默认代码分割后，js是并行加载的，页面在创建dom的时候，会被不必要的js模块加载造成延迟创建，这会导致体验问题。
懒加载就是开始不加载js代码，用指定的交互行为控制用时才加载。如果加载文件体积太大会可能会出现体验问题。
预加载会等到浏览器空闲的时候再加载，原理是link标签的preload属性控制。空闲具体是指预加载不会打扰dom加载和window.onload事件。
配置过后可以查看页面有没有类似的标签
<link as=script href=/js/app.69189fdd.js rel=preload>
<link as=style href=/css/app.f60416c7.css rel=preload>
原理和兼容性介绍
// 懒加载
btn.onclick = ()=> {
import(/* webpackChunkName: 'c' */'./c').then(c => {
console.log(c.paipai('fang'));
})
}
// 预加载
import(/* webpackChunkName: 'c', webpackPrefetch: true */'./c').then(c => {
console.log(c.paipai('fang'));
})
https://webpack.docschina.org/guides/lazy-loading/
查看文档发现vue的懒加载只需要import()的方式。可以参看dynamic-imports-in-vue-js-for-better-performance
使用cdn：
有些第三方库，如vue，jquery等，可以抽离出去，使用外网的免费cdn连接加载，这样可以减少打包体积。当然有时候内网部署的话，把这些不会变化的库提炼出来改为link插入也是类似效果，只不过cdn的网络理论上会好一些，但是稳定性不确定，毕竟是外网链接。
建议生产环境使用cdn，开发环境使用打包方式引入。
cdn网站比如：https://www.bootcdn.cn/
其他的可以自己查找
<!-- 在body结尾加上 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.prod.min.js"></script>
// webpack.config.js中
{
externals: {
vue: 'Vue'
}
}
使用dll技术：
dll技术可以告知webpack，打包的时候忽略哪些库。这样打包的时候就不会打包这些库。除此之外，需要事先把这些库抽离出来，配置好映射关系（manifest），再通过插件在打包的时候把这些库通过script引入到html中去。
相比external，dll也是一种很不错的第三方库抽离方案，即可以减少打包体积，提高开发效率，也不受外网环境影响。
具体步骤：
- 单独打包指定库：
先创建一个单独的webpack配置文件，这里命名为webpack.dll.config.js:
const { resolve } = require('path');
/* eslint-disable */
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
/* eslint-enable */
module.exports = {
mode: 'production',
entry: {
dll: ['jquery', 'moment'],
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash:10]', // 打包库对外暴露的引用命名
},
plugins: [
new CleanWebpackPlugin(),
// 用于产生manifest文件，用于映射打包文件
new webpack.DllPlugin({
name: '[name]_[hash:10]',
path: resolve(__dirname, 'dll/manifest.json'),
}),
],
};
这里用到了webpack.DllPlugin，主要用来生成manifest.json映射文件
需要抽离的库在entry处配置
执行命令webpack --config webpack.dll.config.js
会在指定dll目录下生成2个文件dll.js和manifest.json
这里发现个问题就是manifest.json只能映射一个文件，所以只能抽离一个包，
entry配置多个入口虽然可以打出多个包，但是manifest只会引最后一个，
这会产生一个体积过大的问题，个人感觉这个方案还是比较适合开发环境
- webpack.config.js文件中配置manifest映射关系,这样webpack打包就会根据映射文件不把指定文件打包到bundle中，同时根据映射文件修改库引用名（就是这个[name]_[hash:10]）
const webpack = require('webpack');
//...
plugins: [
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json'),
}),
]
此时再打包会发现，bundle体积减小很多，重复打包的速度会快很多。但是因为第三方库没有打包进来，就没法引用到，所以还需要把dll.js通过script标签引用到html中。
- 使用插件引入dll.js
需要先下载npm包：
npm i -D add-asset-html-webpack-plugin
这个包依赖html-webpack-plugin，具体版本要求可以查看官网add-asset-html-webpack-plugin
然后就是配置plugin：
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
//...
plugins: [
// 将dll.js单独打包到指定目录中，并压缩，同时html中引入script标签
new AddAssetHtmlPlugin({
filepath: resolve(__dirname, 'dll/dll.js'),
outputPath: 'js',
}),
]
辅助小插件
clean-webpack-plugin：
注意关注npm官方文档，目前支持webpack4+，node10+
npm i -D clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//...
plugins: [
new CleanWebpackPlugin()
]
代码规范
npm i -D eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import
eslint：核心解析库
eslint-webpack-plugin：取代了eslint-loader，作为webpack的plugin，内置了一些常用配置
eslint-config-airbnb-base：es规范配置库，支持es6+的语法，如果是react体系需要用eslint-config-airbnb替代
eslint-plugin-import：帮助webpack导入代码规范库
eslint-webpack-plugin有些常用配置如屏蔽node_modules这个插件默认配置了，基本零配置直接用就可以，如果使用vscode，建议配置好IDE插件自动格式化，如果还有报红报黄也一目了然，解决好了才允许提交，这样开发人员基本不用操心代码规范问题。
有时候开发测试代码如console想暂时保留，可以先屏蔽eslint检查。
代码中屏蔽eslint检查以下几种方式：
- 文件顶部 /* eslint-disable / 整个文件不检查,
也可以指定规则整个文件不检查/ eslint-disable no-console */，多个规则空格隔开 - // eslint-disable-next-line 单行不检查
- 指定范围不检查：/* eslint-disable / 和 / eslint-enable */ 之间的代码都不会检查。
/* eslint-disable */
console.log('aaa')
/* eslint-enable */
- 还可以指定特定规则不检查
/* eslint-disable no-console */
alert('lalala')
console.log('aaa')
/* eslint-enable no-console */
- 还可以在配置中指定不处理某条规则：
// package.json中
"eslintConfig": {
"extends": "airbnb-base",
"rules": {
"no-console":"off"
}
}
webpack.config.js：
const EslintWebpackPlugin = require('eslint-webpack-plugin');
//...
plugins: [
new EslintWebpackPlugin()
]
package.json追加配置：
//...
"eslintConfig": {
"eslintConfig": {
"extends": "airbnb-base",
"rules": {
"no-console":"off"
},
"parserOptions": {
"ecmaVersion": 2020
}
}
}
在使用webpack做代码分割的时候，如果用到动态import，默认eslint检查是不通过的，"ecmaVersion": 2020可以解决这个问题~
如果你是vue使用者，还需要安装eslint-plugin-vue，可以对vue文件组件进行的规范检查。
npm i -D eslint-plugin-vue
配合vscode的eslint插件，可以让ide正确的识别vue组件内容和自动格式化。同时eslint配置也可以写到单独的eslintrc.js文件中。
module.exports = {
extends: [
'plugin:vue/essential',
'airbnb-base',
],
rules: {
'no-console': 'off',
'no-new': 'off',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'space-before-function-paren': 'off',
'vue/multi-word-component-names': 'off',
},
parserOptions: {
ecmaVersion: 2020,
},
};
其他功能
resolve配置：
- 别名：
resolve: { // 配置解析模块规则，比较常用的就是别名，缺点是，ide可能无法正常提示路径
alias: {
$css: resolve(__dirname, 'src/css'),
$assets: resolve(__dirname, 'src/assets'),
$js: resolve(__dirname, 'src/js'),
},
},
如果你用了eslint，打包的时候会检查出错误“import/no-unresolved”，需要配置一下eslint配置文件,这里是直接写在package.json中：
屏蔽掉这条规则，打包的时候不需要eslint检查，如果你vscode安装了eslint插件，也会跟着屏蔽掉这个规则。
"eslintConfig": {
"rules": {
"import/no-unresolved": "off"
},
}
还有一种方式是，下载插件：
npm i -D eslint-import-resolver-webpack
然后，配置如下：
"eslintConfig": {
"rules": {
"import/no-unresolved": "off"
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./webpack.config.js"
}
}
}
}
多出来的这些配置主要是帮助插件找到别名配置，可以让eslint正确识别路径，打包不会报错了，
但是ide还是会标红，最终"import/no-unresolved": "off"这条规则还是得加上去，
既然都屏蔽了，eslint-import-resolver-webpack也没有必要用了。
- 文件扩展名
resolve: {
// 配置可省略的文件后缀名默认是js和json
extensions: ['.js', '.json', '.less', '.css', '.vue'],
},
根据自身项目情况，可以追加文件扩展名，这样写代码的时候可以省略文件扩展，当然如果文件同名但是扩展名不同，解析器会优先找js文件，开发中最好不要有同名的情况。
