Webpack Dev Server и реагировать. Получить список каталогов только при запуске приложения - PullRequest
Новая
       8

Webpack Dev Server и реагировать. Получить список каталогов только при запуске приложения

0 голосов
/ 12 мая 2018

Когда я запускаю проект через webpack-dev-server, все, что я вижу в браузере, это список каталогов. Я могу перейти к файлам и увидеть их, но приложение на самом деле не работает.

Когда я запускаю только webpack, выходной файл имеет правильный формат, поэтому я не думаю, что это проблема. Я действительно не могу понять, в чем проблема.

(Команды webpack-dev-server и webpack выполняются путем добавления к скриптам в package.json. Вы можете увидеть это в файле package.json ниже).

What I get in the browser

Я разбил проект на простейшую форму. Это выглядит так:

project file structure

app.js 

console.log("Hello");

package.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.

Все, что я получаю, это файловая система. У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 12 мая 2018

Спасибо Хаммсу, который оставил комментарий, но не ответил.

Причина, по которой вы получаете список каталогов, заключается в том, что webpack-dev-server требует, чтобы js-файлы вызывались из файла index.html.

html-webpack-plugin - один из подходов к созданию этого файла index.html.

...