How to set a webpack 2 alias for a folder? - reactjs

Question

I have a react project that looks like the following:
app
|_ components
|_ containers
|_ actions
|_ reducers
|_ themes
|_ theme1
|_ index.jsx
|_ theme2
|_ index.jsx
package.json
webpack.config.js
My question is:
Is there any way to set an alias that allows me to call any file inside the themes folder?
I'm using webpack 2 and I found somethings like this:
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
Themes$: path.resolve(__dirname, 'src/themes/')
}
},
I would also like to import these files in the following way:
import * as Themes from 'Themes';
When I run my project, I get the following error:
4:1 error 'Themes' should be listed in the project's dependencies.
Run 'npm i -S Themes' to add it import/no-extraneous-dependencies
4:8 error 'Template' is defined but never used
no-unused-vars 4:23 error Multiple spaces found before ''Themes''
no-multi-spaces 4:23 error Absolute imports should come before
relative imports import/first
4:23 error Unable to resolve path to module 'Themes'
import/no-unresolved 4:23 error Missing file extension for
"Themes"
I found some examples in this documentation, but I am not able to figure out the right way to implement it. Can anyone show me how I can set my webpack config in the correct way?
Below is my webpack.config.js:
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.jsx'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
enforce: "pre",
test: /\.jsx$/,
exclude: /node_modules/,
loader: "eslint-loader",
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react', 'stage-0'] }
}]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader'}
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader'},
{ loader: 'less-loader' },
]
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/i,
use: {
loader: 'url?limit=10000!img?progressive=true'
}
},
{ test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
]
},
resolveLoader: { moduleExtensions: ["-loader"] },
devtool: 'source-map',
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
Themes$: path.resolve(__dirname, 'src/themes/')
}
},
plugins: [
new CopyWebpackPlugin([
{ from: './src/html' },
{ from: './src/img/favicon.ico', to: './img'}
])
],
devServer: {
inline: true,
hot: true,
contentBase: path.join(__dirname, 'dist'),
port: 5000
}
}

Answer 1

Try to change configuration to variant with alias look like here:
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
Themes: path.resolve(__dirname, 'src/themes/')
}
},
Then add to themes directory index.js (path: app/themes/index.js):
import * as theme1 from './theme1';
import * as theme2 from './theme2';
export default {
theme1,
theme2
}
File: app/themes/theme1/index.jsx should export object of all staff inside theme1 directory.
import Someting from './Someting';
import Anything from './Anything';
export default {
Someting,
Anything
}
Now you can try:
import * as MyThemes from 'Themes';
console.log(MyThemes.theme1.Someting);
console.log(MyThemes.theme1.Anything);
or
import MyFirstTheme from 'Themes/theme1';
console.log(MyFirstTheme.Someting);
console.log(MyFirstTheme.Anything);
all the same for theme2 directory.