SOURCE

//常用配置、可用于生成配置
module.exports = {
    resolve: {
        alias: {
            Utilities: path.resolve(__dirname, 'src/utilities/'),
            Templates: path.resolve(__dirname, 'src/templates/'),
        },
    },
};

<h1>Reslolves</h1>

<ul>
	<li>alias[ˈeɪliəs]：别名</li>
	<li>extensions：webpack解析的文件类型。默认js、json。我们可以自己添加，同时指定loader。例如vue，jsx。</li>
	<li>modules：告诉 webpack 解析模块时应该搜索的目录。</li>
	<li>exportsFields[fiːldz]：在 package.json 中用于解析模块请求的字段。</li>
	<li>mainFields[fiːldz]：当从 npm 包中导入模块时（例如，import * as D3 from 'd3'）， 此选项将决定在 package.json 中使用哪个字段导入模块。 根据 webpack 配置中指定的
		target 不同，默认值也会有所不同。</li>
	<li>mainFiles：解析目录时要解析的文件名。</li>
</ul>
<strong style="color:red">重点:模快解析</strong>
<ul>
    <li><h3>二奶mainFields</strong></h3></li>
    <li>当 target 属性设置为 webworker, web 或者没有指定：</li>
	<li>mainFields[fiːldz]: ['browser', 'module', 'main']</li>
    <li>对于其他任意的 target（包括 node），默认值为：</li>
	<li>mainFields[fiːldz]: ['module', 'main']</li>
    <li>个人经验：我认为该字段是查找第三方模快目录下js的入口字段类似webpack核心概念entry，
        在第三方包package.json中或多或少的可以查找到'browser', 'module', 'main'三个中的一个或俩个。
        我测试过vue，webpack，vuex，element等，注意mainFields数组顺序查找</li>
</ul>
<strong>webpack处处都在谈及解析</strong>
<ul>
    <li>1.在 resolve.modules 中指定的所有目录检索模块。</li>
	<li>2.如果package中包含 package.json 文件，
        那么他会根据resolve.exportsFields 配置选项中指定的字段查看package.json是否存在该字段（查找到了目录）。
        <br><strong>package.json中，属性值不一定是目录，可以是文件</strong>
    </li>
    <li>3.一旦根据上述规则解析路径后，resolver 将会检查路径是指向文件还是文件夹。如果路径指向文件：
        <br>（1）如果文件具有扩展名，则直接将文件打包。
        <br>（2）否则，将使用 resolve.extensions 选项作为文件扩展名来解析，此选项会告诉解析器在解析中能够接受那些扩展名（例如 .js，.jsx）。</li>
	<li>4.如果路径指向一个文件夹，则进行如下步骤寻找具有正确扩展名的文件：
        <br>（1）如果文件夹中包含 package.json 文件，则会根据 resolve.mainFields 配置中的字段顺序查找，并根据 package.json 中的符合配置要求的第一个字段来确定文件路径。
        <br>（2）如果不存在 package.json 文件或 resolve.mainFields 没有返回有效路径，则会根据 resolve.mainFiles 配置选项中指定的文件名顺序查找，看是否能在 import/require 的目录下匹配到一个存在的文件名。
        <br>（3）然后使用 resolve.extensions 选项，以类似的方式解析文件扩展名。</li>
    <li></li>
</ul>
<strong>为什么mainFields是二奶</strong>
<p>我在查看插件时，有的插件package.json会存在export对象，有的不存在。这时候起作用的只能是mainFields字段</p>
<strong>
    webpack关键词解释：
</strong>
<ul>
    <li>包含Fields的单词的属性，属性值不一定是目录，一般第三方包为了加快打包速度都设置为文件路劲。例如：vue、element、webpack等</li>
    <li>包含Files的单词的属性，属性值必为文件名</li>
</ul>