Resolving relative paths in React with Webpack not working

问题:

I have a react project and I am using webpack. I have a component in frontend/app/components/editor/index.js that I want to include in another component. Currently in order to reference this component I am having to use a relative path (../../../../app/components/editor). However, this is very not easy to use and would like to simply use 'components/editor' for example. My Webpack config file in in fronted/webpack.config.js.

I have added a resolve setting as in this post (Resolving require paths with webpack) but it's still not working.

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,         },       })),     ])   }); };

These are all the settings I have tried in the resolve block but nothing works.

resolve: {        alias: {     shared: path.resolve(__dirname, 'app') },  resolve: {        root: path.resolve('./app') },  resolve: {        modules: ['app'] },  resolve: {        modulesDirectories: ['app'] },

回答1:

Actually, it has to be

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

So modules is a property of resolve object which itself is a property of the global configuration object. Also, I have included node_modules, because it's likely you want to refer to those as well after you overwrite the default, which is just [ 'node_modules' ]. See docs for more information.

Update based on comment

You are getting an error from webpack-validator, which is not gonna be maintained because of the inbuilt webpack validator. See more in this SO answer and webpack-validator npm. So the error [1] "modules" is not allowed is incorrect. To fix it you need to remove/uninstall webpack-validator.

转载请标明出处:Resolving relative paths in React with Webpack not working

文章来源: Resolving relative paths in React with Webpack not working