Webpack别名不起作用

时间:2016-06-03 02:54:16

标签: javascript webpack

我在resolve.alias中设置webpack.config.js alias: { '$': 'jquery', '_': 'underscore' } 并在我的javascript文件中需要这样的模块。 var $ = require('$'); var _ = require('_'); 然后出现了错误 Module not found: Error: Cannot resolve module '$'

我尝试显示错误详情,但我发现它仍然在尝试查找名为$_的模块,而不是jqueryunderscore

那么为什么alias配置不起作用?我是否设置了错误的配置?

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = require('../config');

var projectRoot = path.resolve(__dirname, '../');
var buildPath = path.resolve(__dirname, 'demo');

module.exports = {
// eval-source-map is faster for development
devtool: '#eval-source-map',
entry: {
    miceui: ['webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/dev-server',
        path.resolve(projectRoot, 'index')]
},
output: {
    path: buildPath,
    filename: '[name].js'
},

plugins: [
    new webpack.DefinePlugin({
        'process.env': config.dev.env
    }),
    new ExtractTextPlugin('[name].css'),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
    })
],


module: {
    loaders: [
        { test: /\.htm(l?)$/, loader: 'html-loader' },
        { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' }
    ]
},

resolve: {
    extensions: ['', '.js', '.jsx', '.coffee', '.html', '.css', '.scss'],
    alias: {
        '$': 'jquery',
        '_': 'underscore'
    }
}

};

0 个答案:

没有答案