我正在嘗試使用 Webpack 設定一個非常簡單的基本 TypeScript 專案，但由于某種原因，我遇到了非常困難的時間。
我按照本指南進行操作，一切正常。當我簡單地運行webpack我的檔案時，我的檔案將捆綁并編譯并輸出到dist目錄中。從那里我可以將它們托管在本地服務器上，一切正常。
但是，我想避免每次進行更改時都必須手動捆綁和編譯我的代碼，并且我希望每次保存檔案時都能自動完成。據我所知，這是 Webpack 的常見用途，所以我不確定為什么我很難找到任何好的資訊。
我決定使用 webpack 開發服務器來完成這個，所以我閱讀了這個教程，在我的一生中，我找不到任何人解釋如何讓它也服務器我的index.html？當我運行webpack serve --mode=development一切順利時，當我導航到我服務器的本地主機埠時，我得到一個 404 錯誤。
先前鏈接頁面上的“提示”之一是
如果您遇到問題，導航到該
/webpack-dev-server路線將顯示提供檔案的位置。例如，http://localhost:9000/webpack-dev-server。
當我導航到它時，localhost:1234/webpack-dev-server它告訴我它只提供一個檔案：bundle.js顯然，單獨的 JavaScript 檔案是行不通的，我還需要它來提供index.html我dist目錄中的檔案。
現在，我在這里的知識非常有限，因為這是我第一次使用 Webpack，但這里是我可以提供的所有細節，希望它不會意外地完全無關：
每當我的開發服務器重新加載自身時（無論何時啟動或監視的檔案在運行時發生更改），它只會更新它正在服務的bundle.js檔案。它不會更新bundle.js存盤在dist我硬碟驅動器上的目錄中的檔案。我怎樣才能讓它同時更新？
而且，我如何讓服務器也提供我的index.html檔案，而不僅僅是bundle.js？它甚至是從哪里得到bundle.js的？它是從頭開始編譯我的所有代碼以創建該 js 檔案，還是將其從dist目錄中取出？
此外，我是否完全以錯誤的方式處理這件事？我index.html什至應該去哪里？我將我的 TypeScript 檔案放入一個src目錄中，它們被轉換為.js檔案并移到我的dist目錄中......我應該也將我的index.html放在里面src還是完全屬于dist或其他地方？當我放入它時index.html，src它不會被復制到dist中，它只是完全忽略它。如果我的index.html檔案不屬于，src它必須屬于dist，但如果它屬于，dist那么我怎么能期望開發服務器找到它并將它與其他 TypeScript 檔案一起提供src？為什么開發服務器不能只提供所有內容dist并自動編譯所有內容src進入dist？我一定是誤解了這一切的流程，但我不知道在哪里尋找解釋，我已經在這個問題上待了幾個小時。
只是對這一切如何作業的一般解釋也將非常有幫助，因為我無法在任何地方找到一篇文章或論壇帖子詳細介紹了 Webpack 的所有意大利面。我一直在盡可能地避免打包程式和所有這些 NPM 混亂，因為我經常遇到這樣的問題，但我最終決定跳入并推動所有這些混亂，我已經后悔了。如果有人可以向我（和其他有類似問題的人）指出一些很好的資源來學習所有正在發生的自動魔法，那將不勝感激。Webpack 檔案和指南對新手來說毫無價值。
我的 Webpack 組態檔：
const path = require("path");
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
devServer: {
compress: false,
static: false,
client: {
logging: "warn",
overlay: {
errors: true,
warnings: false
},
progress: true
},
port: 1234, host: "0.0.0.0"
}
};
uj5u.com熱心網友回復：
你的條目是在 webpack 中設定的嗎？所以它被包括在內？
entry: {
main: 'path/to/index.ts'
},
您也可以嘗試添加到您的 index.ts 檔案
require('file-loader?name=[name].[ext]!../index.html');
或者
require("./src/index.html");
// Then In your webpack config file add a loader
loaders : { { test: /\.html/, loader: 'file?name=[name].[ext]' } }
否則你總是可以使用 webpack 復制插件復制這個檔案
{
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
需要運行npm install --save-dev html-webpack-plugin才能安裝它。以及將您的 index.html 檔案移動到您的 src 檔案夾中
uj5u.com熱心網友回復：
請訪問（您的捆綁檔案localhost:1234/bundle在哪里）路由，它將加載帶有捆綁腳本的 HTML 檔案。bundle.jsmagichHTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/459113.html
標籤：javascript 节点.js 打字稿 网页包
上一篇：在Vue2Vue-cli5的Typescript中加載SCSS變數
下一篇：Rails7：加載所有刺激控制器