Как разделить index.html и активы на webpack-dev-сервере?

я хочу иметь следующую структуру папок сборки:

  • /build/index.html
  • /build/static/bundlename.js
  • /build/static/bundlename.css
  • / build / static / img / *
  • / build / static / fonts / *

Как я могу этого добиться? Я понял это путем добавления префикса / static к самому Bundlename для самой нормальной сборки webpack. Но когда я запускаю эту конфигурацию в webpack-dev-server, он не серверные файлы по / static / path.

Я использую загрузчик файлов и загрузчик URL для шрифтов, как я могу изменить их путь? Они появляются в / build root, и я хочу, чтобы они были в папке / static / fonts.

Я использую html-webpack-plugin для создания index.html и добавления ссылки стилей (понятия не имею, почему webpack хочет добавить их из js по умолчанию, это безумие, как вариант, который я вижу, но не как способ по умолчанию)

Я запускаю webpack глотком.

Вы можете увидеть мою конфигурацию здесь. https://github.com/rantiev/template-angular

Заранее спасибо.


webpack webpack-dev-server
person Rantiev    schedule 19.03.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете указать output.path:

output: {
    path: "build/static",
    publicPath: "/static/"
}

и измените путь с index.html на ../index.html в html-webpack-plugin

person Bob Sponge    schedule 19.03.2016
comment
Он работает в сборке webpack, но не работает, когда я запускаю его с помощью webpack-dev-sever. Ни открытием / ни / static webpack-dev-server ничего не дает. Я добавил publicPath, изменил путь index.html на ../, добавил publicPath + historyApiFallback в webpack-dev-server. Проблема в том, что я не могу заставить его работать с devserver, а не с простой сборкой webpack. Вы пробовали это сами с помощью webpack-dev-server? Если да, укажите свои настройки. Классная идея, но мне не подходит. Мог сделал что-то не так. - person Rantiev; 20.03.2016
comment
Извините, но я не использую webpack-dev-server, в любом случае я пытался заставить его работать, но удачи :( - person Bob Sponge; 20.03.2016

arrow_upward
0
arrow_downward

У вас есть output.path, output.publicPath & output.filename (см. Здесь)
Параметр output.path определяет место на диске, в котором записываются файлы

В вашем случае вы хотите path: path.resolve(__dirname, 'build')
Это поместит index.html из HtmlWebpackPlugin в ваш build каталог.

output.filename

Задает имя каждого выходного файла на диске. Вы не должны указывать здесь абсолютный путь! Параметр output.path определяет место на диске, в которое записываются файлы. filename используется исключительно для именования отдельных файлов.

В вашем случае вам понадобится filename: './static/bundlename.js'
Это поместит связанный JS в статический каталог.

Чтобы поместить CSS в статический каталог, вам понадобится ExtractTextPlugin. Как только вы это сделаете, вы захотите добавить что-нибудь в свои плагины для веб-пакетов, например new ExtractTextPlugin('static/bundlename.css')

Для изображений и шрифтов вы можете указать в загрузчиках примерно следующее:

{
    test: /\.(ttf|otf|eot|woff|woff2)$/
    include: [
      path.resolve(__dirname, 'font location here')
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/fonts/[name].[ext]'
    }
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, 'image location here')
    ],
    loader: 'file',
    query: {
      limit: 10000,
      minetype: 'image/svg+xml',
      name: 'static/img/[name].[ext]'
    }
  }

output.publicPath указывает общедоступный URL-адрес выходных файлов при ссылке в браузере. Вы можете попробовать
publicPath: http://localhost:8000/ и посмотреть на этот анализ OTS Webpack ошибка загрузки шрифтов

person M.Holmes    schedule 04.12.2016