webpack 编写loader 报语法错误

问题描述

问 题

webpack.config.js

module.exports = {
    entry: './src/main.js',
    output: {
        path: './build',
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: './upper-loader'
        }]
    }
}

./src/main.js

var hello = () => {
    console.log('hello!');
};

./upper-loader.js

module.exports = function (source) {
    console.log(source);
    //return 'var a = {}';
    return 'va a = {}';
};

本想写一个将代码全部转成大写字母的loader，结果发现总是报错。就尝试修改返回值。

当写return 'var a = {}'没问题。

但是写成return 'va a = {}'就报错了。

yukaPriL-MacBook-Pro:demo4 yukapril$ webpack
var hello = () => {
    console.log('hello!');
};
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.13.3
Time: 44ms
   [0] ./src/main.js 0 bytes [not cacheable] [built] [failed]

ERROR in ./src/main.js
Module parse failed: /Users/yukapril/github/learning/webpack-demo/demo4/upper-loader.js!/Users/yukapril/github/learning/webpack-demo/demo4/src/main.js Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:3)
    at Parser.pp$4.raise (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseTopLevel (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/usr/local/lib/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/usr/local/lib/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/usr/local/lib/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /usr/local/lib/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)

都应该是返回字符串，为什么第二种情况会报错？

解决方案

返回的字符串是经过 loader 处理后的代码，你返回的是非法代码，当然会报错了。

这篇关于webpack 编写loader 报语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！