本文为WebpackCheatSheet|的一部分WebpackBasicsandPracticeList，项目代码可参考fe-boilerplate|多技术堆栈前端项目模板。路径分析随着需求的迭代和功能的完善，我们的项目会越来越大，越来越复杂，目录层次也会不断加深；以React实践清单中讨论的React项目组织为例，我们经常将其分为components、containers、services、apis、ducks、store、i18n等目录，如果它们都是相对路径导入，它们可能看起来像这个：importReactfrom'react';import{connect}from'react-redux';import{someConstant}from'./../../config/constants';importMyComponentfrom'./../../../components/MyComponent';import{myActionCreator}from'./../../../ducks/someReducer';毫无疑问，如此大量的引用必然导致代码之间的耦合度增加，重构或优化难度加大。在模块划分合理的基础上，我们希望在跨模块引用时使用绝对路径，如：importReactfrom'react';import{connect}from'react-redux';import{someConstant}from'Config/constants';importMyComponentfrom'Components/MyComponent';import{myActionCreator}from'Ducks/someReducer';当然，我们不提倡过度使用绝对路径导入。对于有固定相对关系的组件，应该优先使用相对路径导入。Webpack前面介绍过，Webpack允许我们使用resolve.alias来自定义路径解析：module.resolve={alias:{Config:path.resolve(__dirname,'..','src','config'),Components:路径.resolve(__dirname,'..','src','components'),Ducks:path.resolve(__dirname,'..','src','ducks'),Shared:path.resolve(__dirname,'..','src','shared'),App:path.join(__dirname,'..','src')}};开发工具的支持是必然因素，好在VSCode允许我们在jsconfig.json中配置解析规则，Auto-Import等自动导入工具也可以识别这些规则：{"compilerOptions":{"target":"es2017","allowSyntheticDefaultImports":false,"baseUrl":"./","paths":{"Config/*":["src/config/*"],"Components/*":["src/components/*"],"Ducks/*":["src/ducks/*"],"Shared/*":["src/shared/*"],"App/*":["src/*"]}},"exclude":["node_modules","dist"]}ESLintESLint也是前端开发不可或缺的一部分，我们可以使用eslint-import-resolver-webpack来扩展eslint-import的模块解析，使用npm安装模块后，进行如下配置：---settings:import/resolver:webpack#takealldefaults或者指定文件名：---settings:import/resolver:webpack:config：'webpack.dev。config.js'config-index:1#optional,取configatindex1对于没有使用webpack的项目，可以考虑使用eslint-import-resolver-alias://.eslintrc.jsmodule.exports={settings:{'import/resolver':{alias:{map:[['babel-polyfill','babel-polyfill/dist/polyfill.min.js'],['helper','./utils/helper'],['material-ui/DatePicker','../custom/DatePicker'],['material-ui','material-ui-ie10']],扩展名：['.ts','.js','.jsx','.json']}}}};Jest我们可以在package.json中的jest配置项中添加moduleNameMapper属性："jest":{"moduleNameMapper":{"^Config(.*)$":"
