Не могу получить мои js и css файлы с Webpack DevServer - PullRequest
Новая
       7

Не могу получить мои js и css файлы с Webpack DevServer

0 голосов
/ 17 октября 2018

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

root
|_app
| |_index.html
|_dist
| |_js
| | |_app.js
| |_styles
|   |_app.css
|_src
| |_js
| | |_models
| | | |_model.ts
| | |_app.ts
| |_styles
|   |_normalize.css
|   |_style.scss
|_package.json
|_webpack.config.js

В настоящее время моя конфигурация Webpack преобразует SCSS в CSS и копирует его в папку dist.Он делает то же самое с файлом JS (хотя в настоящее время не компилирует .ts в .js, IDE позаботится об этом).

В моем файле index.html у меня есть следующее объявление CSS и JS:

<link rel="stylesheet" href="../dist/styles/app.css">
<script src="../dist/js/app.js" type="text/javascript"></script>

А вот мой конфиг Webpack: 

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        app: [
        './js/app.js',
        ],
    },

    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '../'
    },

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

   ...
}

Когда папка моего приложения находилась внутри папки src, она работала просто отлично.Но однажды я переместил его в корневую папку и соответственно изменил конфигурацию devServer - браузер не может найти CSS и JS.Я постоянно получаю эту ошибку, например: 

Loading failed for the <script> with source “http://localhost:8080/dist/js/app.js”.

Независимо от того, что я пытался (изменение devServer contentBase, изменение JS и пути CSS в html и т. Д.) - он либо не может загрузить index.htmlили загружает его, но не может найти файлы CSS и JS.

Что мне нужно изменить, чтобы он работал?

1 Ответ

0 голосов
/ 17 октября 2018

Посмотрите в браузере, где WDS обслуживает ваши пакеты.Обычно path одинаков для файлов js и css, а filename определяет имя каждого выходного пакета.

Этот пример может помочь вам двигаться вперед: 

output: {
  path: path.resolve(__dirname, 'public/assets'),
  filename: '[name].js',
  publicPath: 'http://localhost:8080/assets/'
}

Прочитайте конфигурацию вывода для получения дополнительной информации и проверьте, используете ли вы sass и ts .

...