webpack-resolve的详细配置

1> alias的配置

 

 alias参数是一个对象，内部表示要设置的别名，一般是绝对路径的别名

  resolve: {
    alias: {
      // 别名的设置
      "@": resolve(__dirname, "./src")
    }
  },

@就是别名，此时可以替代src文件夹

比如b.js文件的引入c.js，使用别名之前

import {c} from "../../../c/c.js"

使用别名

import {c} from "@/c/c.js"

2>  extensions的配置

extensions表示的是可省略的文件拓展名，参数是一个数组

resolve: {
  alias: {
    // 别名的设置
    "@": resolve(__dirname, "./src")
  },
  extensions:['.js','json']
},

此时文件中再引入js和json文件的时候就可以不写.js或者.json了

b.js文件的引入c.js，

import {c} from "@/c/c"

3> modules的配置

modules的配置是优化配置，告诉webpack去什么目录下查找node_modules文件夹

resolve: {
  alias: {
    // 别名的设置
    "@": resolve(__dirname, "./src")
  },
  extensions: ['.js', 'json'],
  // 优化配置-告诉webpack去什么目录下查找node_modules文件夹
  modules: [path.resolve(__dirname, 'src'), 'node_modules']
},