Rozwiązywanie względnych ścieżek w React with Webpack nie działa - reactjs, webpack

Mam projekt reakcji i używam webpacka. Mam składnik frontend / app / components / editor / index.js, który chcę dołączyć do innego komponentu. Obecnie, aby odnieść się do tego komponentu, muszę użyć ścieżki względnej (../../../../app/components/editor). Jednak nie jest to łatwe w użyciu i chciałoby po prostu użyć "komponentów / edytora" na przykład. Mój plik konfiguracyjny Webpack w pliku fronted / webpack.config.js.

Dodałem ustawienie rozstrzygnięcia, jak w tym poście (Rozwiązywanie wymaga ścieżek z pakietem internetowym), ale nadal nie działa.

const {resolve} = require("path");
const path = require("path");
const webpack = require("webpack");
const validate = require("webpack-validator");
const {getIfUtils, removeEmpty} = require("webpack-config-utils");

module.exports = env => {
const {ifProd, ifNotProd} = getIfUtils(env)

return validate({
entry: "./index.js",
context: __dirname,
output: {
path: resolve(__dirname, "./build"),
filename: "bundle.js",
publicPath: "/build/",
pathinfo: ifNotProd(),
},
devtool: ifProd("source-map", "eval"),
devServer: {
port: 8080,
historyApiFallback: true
},
module: {
loaders: [
{test: /.js$/, exclude: /node_modules/, loader: "babel-loader"},
{test: /.css$/, loader: "style-loader!css-loader"},
{test: /(.eot|.woff2|.woff|.ttf|.svg)/, loader: "file-loader"},
],
},
resolve: {
root: path.resolve("./app"),
},
plugins: removeEmpty([
ifProd(new webpack.optimize.DedupePlugin()),
ifProd(new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
quiet: true,
})),
ifProd(new webpack.DefinePlugin({
"process.env": {
NODE_ENV: ""production"",
},
})),
ifProd(new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
screw_ie8: true, // eslint-disable-line
warnings: false,
},
})),
])
});
};

Są to wszystkie ustawienia, które próbowałem w bloku rozstrzygania, ale nic nie działa.

resolve: {
alias: {
shared: path.resolve(__dirname, "app")
},

resolve: {
root: path.resolve("./app")
},

resolve: {
modules: ["app"]
},

resolve: {
modulesDirectories: ["app"]
},

Odpowiedzi:

Właściwie to musi być

model.exports = env => {
...,
resolve: {
modules: ["app", "node_modules"]
},
...
}

Więc modules jest własnością resolve obiekt, który sam jest własnością globalnego obiektu konfiguracyjnego. Dołączę również node_modules, ponieważ najprawdopodobniej chcesz się do nich odnieść po nadpisaniu wartości domyślnej, która jest po prostu [ "node_modules" ]. Zobacz dokumentację po więcej informacji.

Aktualizacja oparta na komentarzu

Otrzymujesz błąd od webpack-validator, który nie zostanie utrzymany ze względu na wbudowany walidator pakietów internetowych. Zobacz więcej w tym WIĘC odpowiedź i webpack-validator npm. A więc błąd [1] "modules" is not allowed jest nieprawidłowe. Aby to naprawić, musisz usunąć / odinstalować webpack-validator.