Webpack解析别名适用于sass,但不能在导入javascript时使用

时间:2016-05-17 05:06:46

标签: javascript reactjs webpack

导入带别名的React组件时出现此错误:

ERROR in ./src/components/EventsFeed/EventsFeedItem/ItemFooter/ItemFooter.js
Module not found: Error: Cannot resolve module '~components/LikeButton' in /Applications/MAMP/htdocs/react-feed/src/components/EventsFeed/EventsFeedItem/ItemFooter
 @ ./src/components/EventsFeed/EventsFeedItem/ItemFooter/ItemFooter.js 15:18-51

我的目标是自动解决目录,这样我就不必在每次导入时都处理这样的事情:" ../../../../...& #34 ;.我像这样导入组件LikeButton:

import LikeButton from '~components/LikeButton';

当我在style.scss文件中导入SASS时,它会起作用:

@import '~/stylesheets/utilities/settings';

这是我的webpack.config.js文件的外观:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const sassLoader = 'css!sass!postcss?indentedSyntax=scss&includePaths[]=' + path.resolve(__dirname, './src');

module.exports = {
    devtool: 'inline-source-map',
    entry: [

        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',  // this exports the final .js file
        publicPath: '/public'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,plugins[]=lodash'] 
            },

           {
                test: /\.scss$/, loader: ExtractTextPlugin.extract('style', sassLoader) 
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("./bundle.css")
    ],
    postcss: [
      autoprefixer({
            browsers: ['last 2 versions']
        })
    ],

    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js', '.scss'],
        root: [path.join(__dirname, './src')],

        alias: {
            stylesheets: path.join(__dirname, './src/stylesheets'),
            components: path.join(__dirname, './src/components')
        }
    }
};

这是我的src文件夹的样子: enter image description here

0 个答案:

没有答案