Question

我正在尝试更新使用webpack 1的项目，现在使用webpack 2，我得到了两个我无法解决的问题。

第一个问题是，除非我提供＆＃39;＆＃39;＆＃39;作为解决方案扩展阵列中的一个选项 - 根据我对文档的理解，这不再是webpack 2所必需的。我可以通过添加＆＃39;＆＃39;来解决错误。但是我在尝试加载文件时遇到错误（＆＃34;意外的令牌。你可能需要一个合适的加载器来处理这个文件类型＆＃34;）。我只在这篇文章中包含这两个问题，因为我认为它们可能都是同一问题的症状。

这是我使用的gulp文件的一部分：

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)
            }
        })
    ]
});

如果我删除了＆＃39;＆＃39;从已解决的扩展中，我收到此错误：

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

如果我离开＆＃39;＆＃39;我收到这个错误：

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

我明白了。我的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'));
});

Webpack 2 / Gulp / Typescript生成意外的令牌错误

2 个答案: