Question

使用Webpack构建TS / SASS可以正常工作，通过VSCode Live Server插件运行它可以将index.html完美呈现到app文件夹中。

运行webpack-dev-server并使其在同一个应用程序文件夹中运行不会。该页面打开，但是出现Javascript错误Uncaught SyntaxError: Unexpected token '<' 而且该页面未呈现JS / CSS。

webpack.config.js

// Imports
var path = require("path");

// Plugins
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Exports
module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  devtool: "inline-source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  output: {
    filename: 'main.min.js',
    path: path.resolve(__dirname, 'app')
  },
  devServer: {
    open: 'http://localhost',
    port: 80,
    publicPath: path.resolve(__dirname, 'app'),
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }, 
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true
  }
}

main.ts

console.log('Main.ts has loaded')
import './styles/main.scss'

任何对此的帮助将不胜感激，我已经失去了主意。

Answer 1

我的问题是webpack.config.js文件中的语法。

我忽略了在每个对象和数组的最后一个条目的末尾插入逗号，以为没有必要。

这是一个有效的配置：

// Imports
var path = require("path");

// Plugins
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Exports
module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  devtool: "inline-source-map",
  output: {
    filename: 'main.min.js',
    path: path.resolve(__dirname, 'app'),
  },
  devServer: {
    open: 'http://localhost',
    port: 80,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ]
      },
    ]
  }, 
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ]
}

Webpack开发服务器（未捕获的SyntaxError：意外的令牌'<'）

1 个答案: