获取全套webpack 4.x教程，请访问瓦力博客
resolve能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。
1.配置resolve
创建resovle.js
myProject
|-build
|-base
|-path.js
|-config.js
|-mode.js
|-entry.js
|-devtool.js
|-module.js
|-plugins.js
|-devServer.js
|-optimization.js
|-output.js
+ |-resolve.js
|-dist
|-node_modules
|-src
|-api
|-apiPath.js
|-util
|-math.js
|-assets
|-css
|-index.css
|-less
|-index.less
|-sass
|-index.scss
|-images
|-wali_logo.png
|-index.html
|-index.js
|-package.json
|-webpack.config.js
|-postcss.config.js
|-.babelrc
|-.eslintignore
|-.eslintrc.js
|-package-lock.json
|-stats.json
build/resolve.js
resolve配置很多，这里小菜只列出自己常用的两个仅供大家参考。reslove 官方文档{:target="_blank"}
const dirpath = require('./base/path');
let resolve = {
alias:{
'@': dirpath.src,
'NodeModule': dirpath.nodeModule,
'Css': `${dirpath.src}/${dirpath.css}`,
'Sass': `${dirpath.src}/${dirpath.sass}`,
'Less': `${dirpath.src}/${dirpath.less}`,
'Images': `${dirpath.src}/${dirpath.images}]`,
'Iconfont': `${dirpath.src}/${dirpath.iconfont}`
},
//当找不到模块时，尝试从后进行寻找
extensions:['.js','.vue'],
}
module.exports = resolve
webpack.config.js
const _mode = require('./build/mode');
const _devtool = require('./build/devtool');
const _entry = require('./build/entry');
const _module = require('./build/module');
const _plugins = require('./build/plugins');
const _devServer = require('./build/devServer');
const _optimization = require('./build/optimization');
+ const _resolve = require('./build/resolve');
const _output = require('./build/output');
module.exports = {
mode: _mode,
devtool: _devtool,
entry: _entry,
module: _module,
plugins: _plugins,
devServer: _devServer,
optimization: _optimization,
+ resolve: _resolve,
output: _output
}
2.alias
我们在上面resolve.js文件中配置了alias。alias就是别名的意思，简单理解就是起一个别名
let resolve = {
alias:{
'@': dirpath.src,
'NodeModule': dirpath.nodeModule,
'Css': `${dirpath.src}/${dirpath.css}`,
'Sass': `${dirpath.src}/${dirpath.sass}`,
'Less': `${dirpath.src}/${dirpath.less}`,
'Images': `${dirpath.src}/${dirpath.images}]`,
'Iconfont': `${dirpath.src}/${dirpath.iconfont}`
}
}
我们一般在源代码中引入模块，有时候会因为文件嵌套比较深，路径写起来很麻烦如../a/b/c/index.js等等。当我们在resolve中配置alias，再引入模块时就比较简化了。
未简化index.js
import "./assets/css/index.css";
import "./assets/less/index.less";
import "./assets/sass/index.scss";
import {strJoin} from './util/math';
console.log(strJoin());
如果配置alias别名后可以写成
import 'Css/index.css';
import 'Less/index.less';
import 'Sass/index.scss';
import '@/util/math';
console.log(strJoin());
运行webpack
yarn run dev
打开浏览器，可以看到样式发生改变了，路径被正常解析了。
3.extensions
当我们在resolve中配置了extensions:['.js','.vue']。我们在源码中这样引入模块
import '@/util/math';
其实webpack是不知道在util加载math.js文件。一般默认配置中会优先查找js文件。小菜之前将extensions:['js','vue']少些了.，在webpack编译时就报错了，意思是找不该文件。如果我们在源码引入vue模块，但是在extensions没有配置引入vue后缀文件。编译时就会报错。
上面我们配置['.js','.vue']
import '@/util/math';
如果在util目录下面没有math.js文件但是有math.vue模块，实际上引入import '@/util/math.vue';
当在某个目录下面优先查找.js文件，没有在查找.vue模块。
我们配置reslove中extensions,extensions如果不合理配置，就会影响到打包速度，一般情况下，extensions只需要配置逻辑处理文件的后缀，千万不要这样写extensions:['.js','.jsx','.vue','.png','css','sass','less']。在webpack编译时，会按下面条件依次查找文件，extensions配置过多就会导致扫描多次数增加，进而影响打包速度。
