Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.06.2018, 11:01
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

webpack-dev-server Cannot GET /dist/css/app.css
Ребята, помогите разобраться со следующей проблемой:

"webpack": "^3.10.0"

У меня следующуя структура папок:

webpack-app/app/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack Test Page</title>
  <link rel="stylesheet" href="../dist/css/app.css">
</head>
<body>
  <h1>Webpack page</h1>

  <div class="home"></div>

  <img src="../dist/img/background/background.jpg" alt="">

  <!-- JavaScript includes -->
   <script src="../dist/js/app/app.js"></script>
</body>
</html>


webpack-app/src/js/
webpack-app/src/scss/
webpack-app/src/fonts/
webpack-app/src/img/

webpack-app/package.json

"scripts": {
	"build": "webpack",
	"watch": "webpack --watch",
	"start": "webpack-dev-server --open",
	"production": "set NODE_ENV=production && webpack"
},



webpack-app/webpack.config.js

// devserver configuration
devServer: {
  contentBase: './app',
},


Если я заускаю команду: npm run build, то у меня проект собирается и правильно подгружаются все пути.

Если же я использую webpack-dev-server npm run start, то пути у меня не видны
Ответить с цитированием
  #2 (permalink)  
Старый 29.06.2018, 11:43
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

В contentBase пишется не имя собранного js файла, а имя директории - в которой лежит сборка проекта после вебпака и devServer, как прокси-сервер, её раздает. То есть, должно быть как-то так
contentBase: path.join(__dirname, 'dist'),
Ответить с цитированием
  #3 (permalink)  
Старый 29.06.2018, 12:06
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

а если у меня вот такая структура: app/index.html и dist/js/app.js Т.е. в dist нет html файла. Или же так не правильно делать?
Ответить с цитированием
  #4 (permalink)  
Старый 29.06.2018, 13:56
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

s24344,
обычно делают так, чтобы после сборки в dist были все необходимые файлы, для развертывания на сервере. То есть html, js, css, fonts, ... Ну и полезный плагин HtmlWebpackPlugin
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2018, 10:24
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разместил файлы Angular-2 на хостинге не работает http://localhost (json server) Иван2017 Angular.js 3 07.02.2018 07:07
Как подключить Bootstrap для webpack 2? Jussia Библиотеки/Тулкиты/Фреймворки 1 24.06.2017 19:32
Документация к проекту собранному с помощью Webpack magmaister Сборка проекта, утилиты 0 13.04.2017 14:53
webpack 1.12.13 ругается Cannot resolve 'file' or 'directory' ./img/readme2.png alexandr2006 Сборка проекта, утилиты 4 11.02.2017 22:09
Миграция на Webpack 2 c Gulp yakutoc Сборка проекта, утилиты 4 03.02.2017 15:16