javascript - Webpack 开发服务器并做出反应。仅在运行应用程序时获取目录列表
问题描述
当我通过 webpack-dev-server 运行项目时,我在浏览器中看到的只是目录列表。我可以导航到文件并查看它们,但该应用程序实际上并未运行。
当我只运行 webpack 时,输出文件的格式正确,所以我认为这不是问题。我真的无法弄清楚问题可能是什么。
(webpack-dev-server 和 webpack 命令是通过添加到 package.json 中的脚本来运行的。您可以在下面的 package.json 文件中看到它)。
我已将项目分解为最简单的形式。它看起来像这样:
应用程序.js
console.log("Hello");
包.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-scripts": "1.1.4",
"webpack-cli": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server --hot -inline"
},
"devDependencies": {
"babel-loader": "^7.1.4",
"file-loader": "^1.1.11",
"react-hot-loader": "^4.1.3",
"webpack": "^4.8.2",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js
module.exports = {
context: __dirname + "/app",
entry: "./app.js",
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader?presets[]=es2015,presets[]=react'],
},
],
},
mode: "development"
}
这是我运行命令时在终端中的输出
npm run webpack-dev-server
> my-app@0.1.0 webpack-dev-server /home/chasmani/Documents/react/project
> webpack-dev-server --hot -inline
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wdm」: Hash: 5a0c6d1388d655e14809
Version: webpack 4.8.2
Time: 1100ms
Built at: 2018-05-11 17:19:57
Asset Size Chunks Chunk Names
app.js 367 KiB javascript [emitted] javascript
Entrypoint main = app.js
[../node_modules/ansi-html/index.js] 4.16 KiB {javascript} [built]
[../node_modules/loglevel/lib/loglevel.js] 7.68 KiB {javascript} [built]
[../node_modules/webpack/hot sync ^\.\/log$] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {javascript} [built]
[0] multi ../node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app.js 52 bytes {javascript} [built]
[../node_modules/sockjs-client/dist/sockjs.js] 176 KiB {javascript} [built]
[../node_modules/strip-ansi/index.js] 161 bytes {javascript} [built]
[../node_modules/url/url.js] 22.8 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ../node_modules/webpack-dev-server/client?http://localhost:8080 7.75 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/overlay.js] 3.58 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/socket.js] 1.05 KiB {javascript} [built]
[../node_modules/webpack/hot/dev-server.js] 1.66 KiB {javascript} [built]
[../node_modules/webpack/hot/emitter.js] 77 bytes {javascript} [built]
[../node_modules/webpack/hot/log-apply-result.js] 1.31 KiB {javascript} [built]
[../node_modules/webpack/hot/log.js] 1.03 KiB {javascript} [built]
[./app.js] 36 bytes {javascript} [built]
+ 13 hidden modules
ℹ 「wdm」: Compiled successfully.
我得到的只是文件系统。有人有想法么?
解决方案
感谢 Hamms,他留下了评论但没有回答。
获得目录列表的原因是 webpack-dev-server 需要从 index.html 文件中调用 js 文件。
html-webpack-plugin是生成此 index.html 文件的一种方法。
推荐阅读
- firebase - 未能更新 Firebase 安全规则
- python - 使用 Python 从 CSV 文件创建 SQL 表
- r - Plotly (R) - 饼图:如何固定每组的颜色分配颜色?
- terraform - Terraform:找不到本地头盔
- python - 破折号没有更新
- javascript - “未捕获的安全错误:无法从 'Document' 读取 'cookie' 属性:在 'data:' URL 中禁用了 Cookie。” 颤振网页视图
- reactjs - 关于开始一个基本的反应项目有什么建议吗?
- xcode - 从构建中的资产文件夹中排除 json 文件
- android - MaterialComponents.DatePicker 日期选择器圈出位置以及如何更改颜色?
- javascript - 如何调用带参数的回调函数?