webpack resolve 解析

webpack resolve 解析

var path = require('path');
module.exports = {

   ...

   resolve:{
        alias:{
            "jquery":__dirname+"/assets/static/js/jquery-3.0.0.min.js",
        "iscroll_zoom":__dirname+"/assets/static/js/iscroll-zoom.js",
        "hammer":__dirname+"/assets/static/js/hammer.js",
        "lrz":__dirname+"/assets/static/js/lrz.all.bundle.js"
        },
        root: [
            path.resolve('./app/modules'),
            path.resolve('./vendor/modules')
        ]
    ...
   }
}

上面代码是webpack.config.js配置文件中的resolve的配置

resolve Options affecting the resolving of modules. 影响模块解析的选项。

resolve.alias

用其他模块或路径替换模块。

Expected is a object with keys being module names. The value is the new path. It’s similar to a replace but a bit more clever. If the the key ends with $only the exact match (without the$) will be replaced.期望的是具有键的模块名称的对象。 该值是新路径。 它类似于一个替换，但有点更聪明。 如果键以$结尾，则只替换完全匹配（不带$）。

If the value is a relative path it will be relative to the file containing the require.如果值是相对路径，它将相对于包含require的文件。

Importent：在实际项目运用中webpack.config.js配置文件中，alias在绝对路径中，使用node.js的__dirname+"/path/"的方式代替"./path"的方式，不知道原因，但是用"./path"这种方式会报错，

ERROR in ./assets/static/js/PhotoClip.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/static/js/iscroll-zoom.js in E:\working-demo\bjxdai-rewrite\assets\static\js
 @ ./assets/static/js/PhotoClip.js 42:2-62

使用__dirname+"/path/"这种形式则不会报错

resolve.root

The directory (absolute path) that contains your modules. May also be an array of directories. This setting should be used to add individual directories to the search path.包含模块的目录（绝对路径）。 也可能是一个目录数组。 此设置应用于将单个目录添加到搜索路径。

It must be an absolute path! Don’t pass something like ./app/modules.
必须是一个绝对路径

Example:

var path = require('path');

// ...
resolve: {
  root: [
    path.resolve('./app/modules'),
    path.resolve('./vendor/modules')
  ]
}