react import改为绝对路径

Posted 2020-10-24 cxscode

最近在使用react时发现路径用../../很不方便，特别是修改项目结构时，加减../都能改到吐血，

所有在网上找了半天webpack的配置，特此记录下

module.exports = (webpackConfig) => {
  const config = Object.create(webpackConfig);
  config.resolve = {
    extensions: [‘.js‘, ‘.jsx‘, ‘.json‘, ‘.scss‘, ‘.css‘],
    alias: {
      ‘@‘: `${__dirname}/src/`,
      ‘static‘: `${__dirname}/src/static/`,
      ‘utils‘: `${__dirname}/src/utils/`,
      ‘config‘: `${__dirname}/src/config/`,
      ‘views‘: `${__dirname}/src/views/`,
      ‘services‘: `${__dirname}/src/services/`,
      ‘components‘: `${__dirname}/src/components/`,
      ‘models‘: `${__dirname}/src/models/`
    }
  };
  return config;
};

　　

调用

import {arrayNullToString} from ‘utils/help/ArrayHelp‘

　　

不用再../了！