CODEWITHSUNDEEP
reactjswebpackwebpack-2
Pablo Darde
Pablo Darde

Reputation: 6432

How to set a webpack 2 alias for a folder?

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
  }
}

Upvotes: 0

Views: 2806

Answers (1)

chuve
chuve

Reputation: 728

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.

Upvotes: 1

Related Questions