Задать вопрос
Riveran
@Riveran
Astartes
react

Не запускается webpack dev server?

Решил создать свой конфиг для сборки проектов на react-ts-scss с возможностью лйв-релоад страницы, вроде бы всё сделал по доке, и проект собирается и работает, но по непонятной мне причине не работает webpack-dev-server, возможно я где то намудрил с конфигом, и кто то может подсказать в чём проблема?
webpack.config
spoiler
module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  output: {
    filename: "./main.js"
  },

  devtool: "source-map",

  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader" 
      },
      { 
        enforce: "pre", 
        test: /\.js$/, 
        loader: "source-map-loader" 
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  },

  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};


packeg.json
spoiler
{
  "name": "typescriptpet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "typescript": "^3.4.5",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.0"
  },
  "dependencies": {
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}


index.htm
spoiler
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="./../node_modules/react/umd/react.development.js"></script>
    <script src="./../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

Структура самого проекта
5ce0422eaaa71504357668.png

При старте сервера в терминале ошибок не возникает, только потом в консоли браузера появляется это
5ce04334e41ff325940797.png
судя по первым двум ошибкам он не может подключится к cкриптам из node_modules я вот только не могу понять почему?
  • Вопрос задан
  • 1024 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@acilsd
~/dist/index.html

удолить: 
<script src="./../node_modules/react/umd/react.development.js"></script>
    <script src="./../node_modules/react-dom/umd/react-dom.development.js"></script>


~/webpack.config.js

удолить:

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }


Вуаля, вы великолепны!
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
s0xzwasd
@s0xzwasd 
<script src="./../node_modules/react/umd/react.development.js"></script>
<script src="./../node_modules/react-dom/umd/react-dom.development.js"></script>

Насколько я понимаю, index.html находится в том же месте, что и node_modules, поэтому подниматься на каталог выше не нужно. Достаточно так:
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

И всё должно быть ок.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
React Native разработчик
Petsee
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы