對于我的簡單 JS Web 應用程式，我有一個這樣的檔案結構：
myproject
│ README.md
│ .gitignore
| index.html
└───style
│ │ style.css
│ │ style.scss
│ │ style.css.map
│
└───js
│ javascript1.js
│ javascript2.js
| javascript3.js
│
└───assets
│ someimage.png
│ someimage2.png
| ...
到目前為止，我的作業流程是將 SCSS 編譯為 CSS，然后index.html在瀏覽器中打開。我想讓作業流程更高效（自動 SCSS 編譯、熱加載或實時重新加載、JS 最小化等），所以我嘗試使用一些構建工具，如 Webpack。例如，我按照指南將此檔案添加webpack.config.js到我的專案的根目錄中：
module.exports = {
entry: [
'./js/javascript1.js',
'./js/javascript2.js',
'./js/javascript3.js',
'./style/style.css'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "script-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
}
}
]
}
]
}
};
和server.js：
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));//
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);
并將一個空bundle.js檔案添加到專案根目錄，并將以下標記添加到我現有的index.html：
<script src="bundle.js"></script>
現在，在添加package.json帶有腳本的檔案后
"dev": "webpack-dev-server --mode development --open"`
和捉迷藏后npm install和npm dev run，專案編譯（根據VS代碼），但我得到以下頁面localhost:8080：
Cannot GET /
我花了一整天的時間試圖弄清楚這一切。為什么我收到這個錯誤？
uj5u.com熱心網友回復：
在 in 中創建一個新的 HTML 頁面\dist，bundle.js從正確的位置參考該檔案并將以下內容添加到module.exportsin 中webpack.config.js：
devServer: {
static: './dist'
},
最后作業了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/314047.html
標籤：javascript 网络包 包.json
下一篇：如何利用可用的Webpack的三搖分發BrowserJS和NodeJS用TypeScript撰寫的NodeJS庫？