Webpack - Typescript 和 Babel “模块构建失败：SyntaxError”答案

【问题标题】：Webpack - Typescript and Babel "Module build failed: SyntaxError"Webpack - Typescript 和 Babel “模块构建失败：SyntaxError”
【发布时间】：2017-10-07 03:07:50
【问题描述】：

在运行 node_modules\.bin\webpack -p --display-error-details 时，我收到错误消息 Module build failed: SyntaxError...Unexpected token, expected ,，表示捆绑了许多不同的文件。

我的 webpack.config.js：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        polyfills: './app/polyfills.ts',
        app: './app/main.ts'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
        sourceMapFilename: '[file].map'
    },
    module: {
        rules: [
            //Order of loaders is important!
            {
                test: /\.ts(x?)$/,
                exclude: ['node_modules'],
                use: [{ loader: 'babel-loader' }, { loader: 'angular-router-loader' }, { loader: 'angular2-template-loader' }],
            },
            {
                test: /\.sass$/,
                exclude: ['node_modules'],
                use: [{ loader: 'css-to-string-loader' }, { loader: 'raw-loader' }, { loader: 'sass-loader', options: { sourceMap: true, sourceMapContents: true } }]
            },
            {
                test: /\.css$/,
                exclude: ['node_modules'],
                use: [{ loader: 'css-to-string-loader' }, { loader: 'raw-loader' }, { loader: 'css-loader' }]
            },
            {
                test: /\.html$/,
                exclude: ['node_modules', 'index.html'],
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.(otf|eot|svg|png|ttf|woff|woff2).*$/,
                exclude: ['node_modules'],
                use: [{ loader: 'url-loader' }]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.css'],
        modules: ["node_modules", "."]
    },
    plugins: [

      new webpack.optimize.CommonsChunkPlugin({
          names: ['vendor'],
          minChunks: function (module, count) {
              // creates a common vendor js file for libraries in node_modules
              return module.context && module.context.indexOf('node_modules') !== -1;
          }
      }),

      new webpack.optimize.CommonsChunkPlugin({
          names: ['meta'],
          chunks: ['vendor', 'app']
      }),

      new HtmlWebpackPlugin({
          template: 'index.cshtml',
          filename: 'index.cshtml',
          inject: 'head'
          , chunks: ['app', 'vendor', 'polyfills', 'meta']
          , chunksSortMode: 'dependency'
          , hash: false
      }),

      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/, //Update for Angular 4
        root('./app'),
        {}
      ),
    ]
};
function root(__path) {
    return path.join(__dirname, __path);
}

还有我的 .babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}

我以前没有使用 webpack 的经验，因此非常感谢任何帮助。我正在使用 Angular 4.1.0 和 babel 6.24.1。

【问题讨论】：

标签： angularjs angular typescript webpack babeljs

【解决方案1】：

我认为您应该使用 ts-loader 而不是 babel（或两者的组合）：试试

npm i -D ts-loader

和：

    {
        test: /\.ts(x?)$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }, { loader: 'ts-loader' }, { loader: 'angular-router-loader' }, { loader: 'angular2-template-loader' }],
    },

【讨论】：