如何在 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 style: https://webpack.js.org/configuration/resolve/#resolve-modules

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

2.x style: 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"
        ]
      }
    }
  },
}

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

How to not rely on relative paths in React/Webpack 3 app

javascript

relative-path

reactjs

webpack

Webpack 配置