webpack resolve.alias 配置问题

Question

alias 解析失败，找不到文件，项目情况及代码片段如下:

/project
    -webpack.config.js
    -/src
        -init.js
        -init-h5.js
        -h5.js
        -/js
            -/lib
                -vue.js
        -/tmpl
            -index.vue

init.js

require.ensure(['./init-h5'], function(require) {
    require('./init-h5')
}, './init-h5');

init-h5.js

require('./h5')

h5.js

import Vue from 'lib/vue.js'

webpack.config.js:

module.exports = {
    context: path.resolve(__dirname, "./src"),
    entry: {
        init: ['babel-polyfill', './init.js'],
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    resolve: {
        root: path.resolve(__dirname, "./src"),
        fallback: [path.resolve(__dirname, './node_modules')],
        extensions: ['', '.js', '.vue'],
        alias: {
            tmpl: '/tmpl',
            lib: '/js/lib'
        }
    },
    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    }
}

enviroment:

PS D:\Projects\SVN\mosaic> cmd /c "ver"
Microsoft Windows [版本 10.0.14393]

PS D:\Projects\SVN\mosaic> node --version
v4.3.1

PS D:\Projects\SVN\mosaic> npm --version
2.14.12

Error:

ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /js/lib/vue.js in D:\Projects\SVN\mosaic\src
 @ ./h5.js 3:11-32

ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /js/lib/vue-router in D:\Projects\SVN\mosaic\src
 @ ./h5.js 7:17-42

ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /tmpl/index.vue in D:\Projects\SVN\mosaic\src  
 @ ./h5.js 20:15-40

Answer 1

alias不是这样用的，得上文件系统版的绝对路径，例如D:/XXX/XXX/XX.JS

可先用__dirname(也就是当前配置文件的绝对路径)来定个网站文件的根目录，然后再用path.resolve()来确定目标文件的绝对路径

var staticRootDir = path.resolve(__dirname, '../../'); // 项目根目录
var jqueryPath = path.resolve(staticRootDir, './static/js/jquery.js';