網站搜尋

Webpack 4 - TypeScript 入口文件


我正在設置我的小型個人專案,並且在使用 TypeScript 和 React 時遇到了一個問題。當我使用 index.js 作為入口點時,一切正常,但當我使用 .tsx 檔案時,我收到以下錯誤:

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src'

我本可以放棄然後使用 .js,但我很好奇為什麼會發生這種情況。詳細的錯誤訊息指出它只會尋找 .wasm、.mjs、.js 和 .json 檔案副檔名,忽略我放入 resolve: { extensions: [] } 的內容。

no extension
  Field 'browser' doesn't contain a valid alias configuration
  [path_to_project]\src\index doesn't exist
.wasm
  Field 'browser' doesn't contain a valid alias configuration
  [path_to_project]\src\index.wasm doesn't exist
.mjs
  Field 'browser' doesn't contain a valid alias configuration
  [path_to_project]\src\index.mjs doesn't exist
.js
  Field 'browser' doesn't contain a valid alias configuration
  [path_to_project]\src\index.js doesn't exist
.json
  Field 'browser' doesn't contain a valid alias configuration
  [path_to_project]\src\index.json doesn't exist

我的 webpack.config.js 檔案:

const path = require('path');

module.export = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    entry: {
        app: './src/index.tsx'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'pfgen.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.d.ts', '.tsx']
    }
};

這是我的專案庫:REPOSITORY 這裡是我正在使用的 webpack 版本:

"ts-loader": "^5.3.1",
"typescript": "^3.2.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"

答案#1

將 module.export 改成 module.exports。我剛拉取、修改,然後使用你的 Git 倉庫成功建置了。

順帶一提,也請將 /node_modules 加入你的 .gitignore,這樣像 VSCode 這樣的編輯器在與 master 比較時就不會查看該目錄。

乾杯!