webpack 解析resolve(20)

获取全套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

打开浏览器，可以看到样式发生改变了，路径被正常解析了。

ssl

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配置过多就会导致扫描多次数增加，进而影响打包速度。