react配置之绝对路径

绝对路径不多bb，简单的说就是，我们不再使用 ../  ../../之类的来表示路径位置了

直接上代码

我用的是react-crate-app脚手架

 

1.  npm install react-create-app -g
2. react-create-app my-react
3. cd my-react
4. npm install
5. npm run ejecj 得到想要的了
6. 再config 中的  webpack.config.dev.js  和  webpack.config.prop.js的文件中，分别编辑，如下

extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
  
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'common': path.resolve(__dirname, '../src/common'),
    'components': path.resolve(__dirname, '../src/components'),
    'pages': path.resolve(__dirname, '../src/pages'),
    'static': path.resolve(__dirname, '../src/static'),
    'config': path.resolve(__dirname, '../src/config'),
},
plugins: [
  // Prevents users from importing files from outside of src/ (or node_modules/).
  // This often causes confusion because we only process files within src/ with babel.
  // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
  // please link the files into your node_modules/ and let module-resolution kick in.
  // Make sure your source files are compiled, as they will not be processed in any way.
  new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],

我的src下得目录结构如下