Webpack 2/Gulp/Typescript生成意外令牌错误
我正在尝试更新一个使用Webpack1的项目,现在使用Webpack2,我遇到了两个不同的问题,我无法解决 第一个问题是,除非我在resolve extensions数组中提供“”作为选项,否则webpack似乎无法找到我的入口点-根据我对文档的理解,webpack 2不再需要这样做。我可以通过添加“”来绕过此错误,但随后在尝试加载文件时出现错误(“意外标记。您可能需要适当的加载程序来处理此文件类型”)。我只在这篇文章中包括这两个问题,因为我认为它们可能是同一问题的两个症状 这是我正在使用的一部分gulp文件:Webpack 2/Gulp/Typescript生成意外令牌错误,typescript,gulp,webpack-2,Typescript,Gulp,Webpack 2,我正在尝试更新一个使用Webpack1的项目,现在使用Webpack2,我遇到了两个不同的问题,我无法解决 第一个问题是,除非我在resolve extensions数组中提供“”作为选项,否则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配置拆分为两个文件-以下是包含typescript加载程序的通用文件:
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'
})
]
};
这是一个继承的文件,包含特定于开发的内容(与我的生产文件略有不同):
如果从已解析的扩展中删除“”,则会出现以下错误:
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)
如果我在“”中离开,则会出现以下错误:
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)
错误:./src/app/entry1.ts
模块分析失败:W:\TestApp\src\app\entry1.ts意外令牌(14:13)
您可能需要适当的加载程序来处理此文件类型。
SyntaxError:意外标记(14:13)
在Parser.pp$4.raise(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:2221:15)
位于Parser.pp.unexpected(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:603:10)
分号(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:581:61)
在Parser.pp$1.parseVarStatement(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:918:10)
在Parser.pp$1.parseStatement(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:706:19)
在Parser.pp$1.parseTopLevel(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:638:25)
在Parser.parse(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:516:17)
在Object.parse(W:\TestApp\node\u modules\webpack stream\node\u modules\acorn\dist\acorn.js:3098:39)
在Parser.parse(W:\TestApp\node\u modules\webpack stream\node\u modules\webpack\lib\Parser.js:902:15)
在DependenciesBlock。(W:\TestApp\node\u modules\webpack stream\node\u modules\webpack\lib\NormalModule.js:104:16)
我非常感谢任何人能够提供的任何帮助,因为我有点绝望了,我不想停留在webpack 1上。您的入口点不需要指定扩展名:
entry: {
MyEntry1: './src/app/entry1',
MyEntry2: './src/app/entry2'
},
我想出来了。我的gulp任务必须将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'));
});