如何不依赖React / Webpack 3应用程序中的相对路径

Question

我正试图摆脱这个：

import { something } from '../../services/somewhere';

而是使用：

import { something } from 'services/somewhere';

我找到了这篇文章，但它只有一个1.x和2.x的例子 https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/

我项目的主文件夹名为app。

我在webpack.config.babel.js中尝试过这两种方法，但到目前为止还没有运气。

  

3.x风格：https://webpack.js.org/configuration/resolve/#resolve-modules

resolve: {
  modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}

  

2.x风格：https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/

resolve: {
  modules: [
    path.resolve('./app'),
    path.resolve('./node_modules')
  ]
}

有什么想法吗？

Webpack配置

/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';

const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  // template: `${__dirname}/app/index.html`,
  template: path.join(__dirname, '/app/index.html'),
  inject: 'body'
});

const ExtractTextPluginConfig = new ExtractTextPlugin({
  filename: 'coinhover.css',
  disable: false,
  allChunks: true
});

const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);

const PATHS = {
  app,
  build: coinhover
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;

const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.s?css/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
  }
  // resolve: {
  //   modules: [
  //     path.resolve('./app'),
  //     path.resolve('./node_modules')
  //   ]
  // }
};

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig
  ]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig,
    productionPlugin
  ]
};

log(`${chalk.magenta(' ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
);

Answer 1

也许这是你的eslint配置的问题？例如，在.eslintrc中，尝试将app添加到解析程序设置中：

{
  "...": {},
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": [
          "app",
          "node_modules"
        ]
      }
    }
  },
}