Webpack错误解决 二 Cannot resolve 'file' or 'directory'

                       

在webpack的使用中，出现如下错误：

Module not found: Error: Cannot resolve 'file' or 'directory' ./MathUtils in E:\Workspace\webpack-common\es6
   
   

    
    
1
    
    
2
    
    
3
   
   

通过提示信息可以看出，获取的文件没有后缀名，针对这种情况，必须要检查webpack的resolve配置信息，如果没有配置resolve，必须添加在webpack配置文件中如下信息：

//  用来配置应用层的模块解析，即要被打包的模块resolve: {    //  第一项扩展非常重要，千万不要忽略，否则经常出现模块无法加载错误    extensions: ['', '.js', '.es6', '.vue']},
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
   
   

通过以上配置，webpack会自动为请求的文件添加后缀名，从而保证请求的路径正确无误。

对上面的配置进行说明，即请求js、es6、vue文件时不需要添加后缀名，直接请求即可，如下。

import {add} from './MathUtils'
   
   

    
    
1
   
   

当然了，添加上后缀名也可，如下，唯一不好的地方就是程序的可移植性与兼容性稍差：

#   这样代码也可以正常编译，但是可移植性稍差import {add} from './MathUtils.es6'
   
   

    
    
1
    
    
2