模块构建失败：错误：最终加载器未返回Buffer或String

时间：2017-03-23 07:06:31

标签： typescript webpack webpack-dev-server

好吧，我正在使用webpack和typescript开始一个项目，但由于错误BOOL func(...) { //... return ( f1() && f2() && f3()); }

，构建失败了

经过一些调查后我发现它可能是版本不匹配的问题，我试图将typescript版本更新到2.2.1和“awesome-typescript-loader”：“3.1.2”但仍面临同样的问题。

错误：

Module build failed: Error: Final loader didn't return a Buffer or String

的package.json：

    ERROR in ./src/app/index.ts
Module build failed: Error: Final loader didn't return a Buffer or String
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\webpack\lib\NormalModule.js:149:64
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at runSyncOrAsync (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\awesome-typescript-loader\src\index.ts:106:13
    at process._tickCallback (node.js:368:9)
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/index.ts

ERROR in ./src/app/vendor.ts
Module build failed: Error: Final loader didn't return a Buffer or String
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\webpack\lib\NormalModule.js:149:64
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at runSyncOrAsync (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\awesome-typescript-loader\src\index.ts:106:13
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/vendor.ts
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 542 kB [entry]
         + 4 hidden modules
webpack: Failed to compile.

webpack.config.json：

{
  "name": "angular-typescript-webpack",
  "version": "0.0.1",
  "scripts": {
    "build": "rimraf dist && webpack --bail --progress --profile --env=production",
    "server": "webpack-dev-server --history-api-fallback --inline --hot --progress --env=dev",
    "server2": "webpack-dev-server",
    "start": "npm run server"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/es6-promise": "^0.0.32",
    "autoprefixer": "^6.4.1",
    "awesome-typescript-loader": "3.1.2",
    "connect-history-api-fallback": "^1.3.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "ng-annotate-loader": "^0.1.1",
    "node-sass": "^3.10.0",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "require-dir": "~0.3.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "typescript": "2.2.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.2",
    "webpack-stream": "^3.2.0"
  },
  "engines": {
    "node": ">=4.0.0"
  },
  "dependencies": {
    "angular": "^1.5.8",
    "angular-animate": "^1.5.8",
    "angular-aria": "^1.5.8",
    "angular-cookies": "^1.5.8",
    "angular-material": "1.1.1",
    "angular-messages": "^1.5.8",
    "angular-resource": "^1.5.8",
    "angular-sanitize": "^1.5.8",
    "angular-ui-router": "^1.0.0-beta.3"
  }
}

tsconfig.json：

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

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

var getPath = function (pathToFile) { return path.resolve(__dirname, pathToFile) };

var ENV = process.env.npm_lifecycle_event;
var isProd = ENV === 'build';

module.exports = (function makeWebpackConfig() {

    var config = {};

    config.entry = {
        'app': './src/app/index.ts',
        'vendor': './src/app/vendor.ts'

    };

    config.output = {
        path: getPath('./dist'),
        filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
        chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js',
        publicPath: isProd ? '/' : 'http://localhost:8080/'

    };

    config.devtool = 'source-map';
    config.resolve = {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    };
    config.module = {
        loaders: [
            {
                // TS LOADER
                test: /\.ts$/,
                loader: 'ng-annotate!awesome-typescript-loader',
                include: [
                    getPath("src/app")
                ]
            },
            {
                // JS LOADER
                test: /\.js$/,
                loader: 'babel',
                include: [
                    getPath("src/app")
                ]
            },
            {
                // SCSS LOADER - generates a separate CSS file, and adds the link to <head>
                test: /\.scss$/,
                loader: isProd ?  ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) : 'style!css!sass'
            },
            /**
             * To keep CSS bundled in with the generated JS, uncomment this section
             */
            // {
            //     test: /\.scss$/,
            //     loader: 'style!css!sass'
            // },
            {
                // ASSET LOADER
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                // HTML LOADER
                test: /\.html$/,
                loader: 'raw',
                exclude: /(index)/
            }
        ]
    };

   /* config.postcss = [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ];*/


    config.plugins = [
        new CommonsChunkPlugin({
            names: ['vendor'],
            minChunks: Infinity
        }),

        new HtmlWebpackPlugin({
            template: getPath('./src/index.html'),
            inject: 'body'
        })
    ];

    if (isProd) {
        config.plugins.push(
            // Create separate CSS file
            new ExtractTextPlugin('app.css'),

            // Dedupe modules in the output
            new webpack.optimize.DedupePlugin(),

            // Minifiy all JS, switch loaders to minimizing mode
            new webpack.optimize.UglifyJsPlugin()
        );
    }


    config.devServer = {
        contentBase: './src'
    };

    return config;
})();

index.ts：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "noEmitHelpers": true
  },
  "compileOnSave": false,
  "include": [
    "src/app/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

1 个答案:

答案 0 :(得分：2)

问题出在.ts规则中，您希望使用ng-annotate-loader，但您确实使用的是ng-annotate，这是一个单独的模块，不是＆＃39 ; t应该用作装载机。您明确需要使用ng-annotate-loader：

{
    // TS LOADER
    test: /\.ts$/,
    loader: 'ng-annotate-loader!awesome-typescript-loader',
    include: [
        getPath("src/app")
    ]
},

这是不再允许在webpack 2中省略-loader后缀的主要原因，如Automatic -loader module name extension removed中所述。

相关问题
最新问题