Webpack 2/Gulp/Typescript產生意想不到的令牌錯誤

Question

我想更新一個使用webpack 1的項目，現在使用webpack 2，我得到了兩個不同的問題，我無法解決。

第一個問題是，webpack似乎無法找到我的入口點，除非我在解析擴展數組中提供''作爲選項 - 基於我對文檔的理解，這對於webpack 2不再是必需的。我可以通過添加''來解決錯誤，但是當我嘗試加載文件時出現錯誤（「意外的令牌，你可能需要一個合適的加載器來處理這種文件類型」）。我只在這篇文章中包含這兩個問題，因爲我認爲它們可能都是同一問題的症狀。

這是我一飲而盡文件的一部分，我使用：

const helpers = require('./config/helpers'); 

var gulp = require('gulp'); 
var webpack = require('webpack'); 
var webpackStream = require('webpack-stream'); 

const buildNumber = process.env.buildNumber = helpers.buildNumber; 


gulp.task('build-host-Debug', function (cb) { 
    var webpackConfig_Host = require('./config/webpack-host.dev.js'); 

    return gulp 
     .src([ 
      './src/app/entry1.ts' 
     ], { base: 'src' }) 
     .pipe(webpackStream(webpackConfig_Host)) 
     .pipe(gulp.dest('./app')); 
}); 

我分裂的WebPack配置爲兩個文件 - 這裏的共同文件，其中包括打字稿裝載機：

var webpack = require('webpack'); 
var helpers = require('./helpers'); 
var Visualizer = require('webpack-visualizer-plugin'); 

require('es6-promise').polyfill(); 

module.exports = { 
    entry: { 
     MyEntry1: './src/app/entry1.ts', 
     MyEntry2: './src/app/entry2.ts' 
    }, 
    output: { 
     path: helpers.root('app'), 
     filename: 'js/[name].js', 
     chunkFilename: '[id].chunk.js' 
    }, 

    resolve: { 
     extensions: ['', '.tsx', '.ts', '.js'] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/main'), /node_modules/], 
       use: [{ 
        loader: 'awesome-typescript-loader' 
       }] 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/main'), /node_modules/], 
       use: [{ 
        loader: 'file-loader?name=images/[name].[ext]' 
       }] 
      } 
     ] 
    }, 
    plugins: [ 
     new Visualizer({ 
      filename: './stats-host.html' 
     }) 
    ] 
}; 

這是繼承的文件，具有開發特定的東西（而不是我的生產文件略有不同）：

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack-host.common.js'); 
var helpers = require('./helpers'); 

process.env.buildNumber = helpers.buildNumber; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'inline-source-map', 
    module: { 
     rules: [ 
      { 
       test: /entry1\.scss$/, 
       include: helpers.root('src', 'app/css'), 
       use: [{ loader: 'file-loader?name=css/[name].css' }, { loader: 'sass-loader?sourceMap' }] 
      }, 
      { 
       test: /entry2\.scss$/, 
       include: helpers.root('src', 'app/css'), 
       use: [{ loader: 'file-loader?name=css/[name].css' }, { loader: 'sass-loader?sourceMap' }] 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'buildNumber': JSON.stringify(process.env.buildNumber) 
      } 
     }) 
    ] 
}); 

如果我刪除了'從解決擴展，然後我得到這個錯誤：如果我在離開

Error: Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/app/entry1.ts in W:\TestApp\ 
resolve file 
    W:\TestApp\src\app\entry1.ts.tsx doesn't exist 
    W:\TestApp\src\app\entry1.ts.ts doesn't exist 
    W:\TestApp\src\app\entry1.ts.js doesn't exist 
resolve directory 
    W:\TestApp\src\app\entry1.ts\package.json doesn't exist (directory description file) 
    W:\TestApp\src\app\entry1.ts is not a directory 

的'我得到這個錯誤：

Error: ./src/app/entry1.ts 
Module parse failed: W:\TestApp\src\app\entry1.ts Unexpected token (14:13) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (14:13) 
    at Parser.pp$4.raise (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp.semicolon (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:581:61) 
    at Parser.pp$1.parseVarStatement (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:918:10) 
    at Parser.pp$1.parseStatement (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:706:19) 
    at Parser.pp$1.parseTopLevel (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (W:\TestApp\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (W:\TestApp\node_modules\webpack-stream\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (W:\TestApp\node_modules\webpack-stream\node_modules\webpack\lib\NormalModule.js:104:16) 

我感謝所有幫助任何人可能能夠提供，因爲我越來越絕望，寧可不必留在webpack 1.

Answer 1

您的切入點不需要指定的擴展名：

entry: { 
    MyEntry1: './src/app/entry1', 
    MyEntry2: './src/app/entry2' 
}, 

Answer 2

我想通了。我的大量任務必須將webpack對象傳遞給webpackStream：

gulp.task('build-host-Debug', function (cb) { 
    var webpackConfig_Host = require('./config/webpack-host.dev.js'); 

    return gulp 
     .src([ 
      './src/app/entry1.ts' 
     ], { base: 'src' }) 
     .pipe(webpackStream(webpackConfig_Host, webpack)) 
     .pipe(gulp.dest('./app')); 
});