獲取全套webpack 4.x教程，請?jiān)L問瓦力博客

resolve能設(shè)置模塊如何被解析。webpack 提供合理的默認(rèn)值，但是還是可能會(huì)修改一些解析的細(xì)節(jié)。

1.配置resolve

創(chuàng)建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配置很多，這里小菜只列出自己常用的兩個(gè)僅供大家參考。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}`
    },
    //當(dāng)找不到模塊時(shí)，嘗試從后進(jìn)行尋找
    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就是別名的意思，簡單理解就是起一個(gè)別名

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}`
    }
}

我們一般在源代碼中引入模塊，有時(shí)候會(huì)因?yàn)槲募短妆容^深，路徑寫起來很麻煩如../a/b/c/index.js等等。當(dāng)我們在resolve中配置alias，再引入模塊時(shí)就比較簡化了。

未簡化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());

運(yùn)行webpack

yarn run dev

打開瀏覽器，可以看到樣式發(fā)生改變了，路徑被正常解析了。

ssl

3.extensions

當(dāng)我們在resolve中配置了extensions:['.js','.vue']。我們在源碼中這樣引入模塊

import '@/util/math';

其實(shí)webpack是不知道在util加載math.js文件。一般默認(rèn)配置中會(huì)優(yōu)先查找js文件。小菜之前將extensions:['js','vue']少些了.，在webpack編譯時(shí)就報(bào)錯(cuò)了，意思是找不該文件。如果我們在源碼引入vue模塊，但是在extensions沒有配置引入vue后綴文件。編譯時(shí)就會(huì)報(bào)錯(cuò)。

上面我們配置['.js','.vue']

import '@/util/math';

如果在util目錄下面沒有math.js文件但是有math.vue模塊，實(shí)際上引入import '@/util/math.vue';

當(dāng)在某個(gè)目錄下面優(yōu)先查找.js文件，沒有在查找.vue模塊。

我們配置reslove中extensions,extensions如果不合理配置，就會(huì)影響到打包速度，一般情況下，extensions只需要配置邏輯處理文件的后綴，千萬不要這樣寫extensions:['.js','.jsx','.vue','.png','css','sass','less']。在webpack編譯時(shí)，會(huì)按下面條件依次查找文件，extensions配置過多就會(huì)導(dǎo)致掃描多次數(shù)增加，進(jìn)而影響打包速度。