素材牛VIP会员
webpack resolve.alias 配置问题
 陈***8  分类:Node.js  人气:1000  回帖:3  发布于6年前 收藏

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

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv3 码奴
ch***26 技术总监 6年前#1

不是这么配置的,文件处理流程是,入口经过resolve中加载的resolve-loader来处理,然后输出,路径配置还有根目录都应该放在entry或者设置全局路径变量,resolve只放loader。

Lv6 码匠
qi***un 技术总监 6年前#2

试试

alias: {
    tmpl: path.resolve(__dirname, "./src/tmpl"),
    lib: 'js/lib'  // 注意不加斜杠
}
Lv5 码农
谁***哥 Web前端工程师 6年前#3

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

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

var staticRootDir = path.resolve(__dirname, '../../'); // 项目根目录
var jqueryPath = path.resolve(staticRootDir, './static/js/jquery.js'; 
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取