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 比較時就不會查看該目錄。
乾杯!