0
webpack 1を使用していたプロジェクトをwebpack 2を使用して更新しようとしていますが、回避できない2つの問題が発生しています。Webpack 2/Gulp/Typescriptで予期しないトークンエラーが発生する
最初の問題は、解決拡張配列のオプションとして "'を指定しない限り、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'));
});
私は2つのファイルに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'
})
]
};
そして、これは開発特有のものを持つ継承されたファイルです（私の制作ファイルは少し異なります）。
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)
私は誰その任意の助けに感謝私は一生懸命になっていて、ウェブパック1にとどまる必要はないでしょう。