webpack

[binperson]

Resolve

webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。

1. alias

resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下：

//webpack alias配置
resolve: {
    alias: {
        componets: './src/components/'
    }
}

当你通过import Button from 'components/button'导入时，实际上被alias等价替换成import Button from './src/components/button'。以上alias配置的含义是把导入语句里的components关键字替换成./src/components。这样做可能会命中太多的导入语句， alias还支持$符号来缩小范围只命中以关键字结尾的导入语句：

resolve: {
    alias: {
        'react$' : '/path/to/react.min.js'
    }
}

这样react$只会命中以react结尾的导入语句，即只会把import react关键字替换成import '/path/to/react.min.js'

[binperson]

devServer

link