详解webpack与SPA实践之开发环境搭建(4)

日期：2020-05-11 栏目：程序人生浏览：次

module.loaders：指定解析文件的加载器模块及各模块解析规则，可以设置以下属性：

模块解析规则配置

webpack支持在resolve属性对象中配置模块解析规则，主要有root，modules, alias和extensions属性。

resolve.root与resolve.modules

该属性设置的是在开发代码中使用require或import加载某模块时，webpack查找该模块所遵循的查找目录范围，如在源代码中存在：

var utils = require('utils/utils.js');

而root配置如下：

  resolve: {
    root: [
      path.resolve('./src/'),
      'node_modules'
    ]
  }

webpack编译时将自动在项目根目录下的src目录内的utils目录下查找utils.js，若存在，则返回，否则进入node_modules目录内查找utils.js模块。

当然，若未设置resolve.root属性值，则webpack默认先从node_modules查找模块，然后在根目录下查找。

注意：resolve.root在webpack v1版本中使用，而在webpack v2 中，使用modules代替，建议使用v2版本，后文也将统一使用modules属性。

resolve.alias

alias，有别名的意思，这里的作用是设置其他模块或路径的别名，webpack在解析模块时，将使用配置值替换该别名，如，在未设置alias属性内容时，即resolve.alias默认是空对象{}时，我们在代码中引用模块：

var Vue = require('vue/dist/vue.js');
var TopHeader = require('components/header.js');

webpack在编译代码时，按resolve.modules声明的顺序依次查找对应模块，如按照上一节定义的resolve.modules：

  resolve: {
    root: [
      path.resolve('./src/'),
      'node_modules'
    ]
  }

查找模块时，将首先在src/vue/dist/目录下寻找vue模块，在src/components/目录下查找header.js模块，查找到后返回，否则进入node_modules目录查找。

现在，我们还可以通过resolve.alias为模块或路径声明一个别名，更方便的声明加载模块：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
      components: path.resolve(__dirname, 'src/components/')
    }
  }

我可以使用如下方式加载模块：

var Vue = require('vue');
var TopHeader = require('components/header.js');

$符号

关于alias的详细使用介绍，请参见文档，本文并不是要介绍webpack文档，在这里介绍一下声明的vue$别名中的$符号：