B
B
bio2016-09-01 10:23:03
webpack
bio, 2016-09-01 10:23:03

How to make webpack 2 understand imports from the project root?

Good afternoon!
I decided to try switching to webpack 2, but I can't figure out how to implement imports from the project root.
In the first version, I did it using the babel plugin babel-root-slash-import
Import looks like this import UserService from '/core/user/user.module';
Webpack 2 swears at

Module not found: Error: Can't resolve

webpack settings:
"use strict";

const path              = require('path');
const webpack           = require('webpack');
const NgAnnotatePlugin  = require('ng-annotate-webpack-plugin');

module.exports = {
    context: __dirname + '/app',
    
    entry: {
        app:    './bootstrap.js',
        vendor: './vendor.js'
    },
    output: {
        chunkFilename: '[name].[chunkhash].js',
        path: __dirname + '/dist',
        filename: `[name].[chunkhash].js`,
        publicPath: '/crm/'
    },

    plugins: [
        new webpack.NoErrorsPlugin(),

        new NgAnnotatePlugin({
            add: true
        })
    ],

    resolve: {
        root: path.resolve(__dirname, 'app'),
        extensions: ['','.js']
    },

    resolveLoader: {
        modulesDirectories: ['node_modules'],
        moduleTemplates: ['*-loader',''],
        extensions: ['','.js']
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /\/node_modules\//,
                include: __dirname + '/app',
                query: {
                    cacheDirectory: true,
                    plugins: [
                        'transform-runtime',
                        'transform-class-properties'
                    ],
                    presets: ['es2015-native-modules']
                }
            },
            {
                test: /\.html$/,
                loader: 'raw',
                query: {
                    minify: true
                }
            },
            {
                test: /\.(css|less)$/,
                loader: extractLESS.extract(['css','less'])
            }
        ],

        noParse: [
            /angular\/angular.js/,
            /angular-ui-router/,
            /jquery\/src\/jquery.js/,
            /moment\/moment.js/
        ]


    }
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Igor, 2016-09-01
@Kraky

Try adding a resolve.alias section:

resolve: {
    alias: {
      core: path.resolve(__dirname, 'core'),
    }
  },

Then you can call modules likeimport SomeModule from 'core/modules/SomeModule';

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question