Как настроить различные параметры пути для webpack-dev-server, если index.html не находится непосредственно в выходном корне? - PullRequest
Новая
       26

Как настроить различные параметры пути для webpack-dev-server, если index.html не находится непосредственно в выходном корне?

0 голосов
/ 09 мая 2019

Моя установка использует webpack 4 с html-webpack-plugin и webpack-dev-server. Суть моего проекта заключается в создании библиотеки стилей (конечными результатами являются css, js и другие файлы изображений и файлы шрифтов, если возникнет такая необходимость) и сопровождающих страниц документации HTML (предполагаемая аудитория - разработчики, которые будут использовать стиль lib). Поэтому мой вывод имеет такую ​​структуру: 

dist
  |--production
  |    |--scripts    # flabbergastor.js
  |    |--styles     # flabbergastor.css
  |    |--fonts      # *.woff2 files
  |    |--images     # *.svg, *.png files
  |
  |--documentation
       |--parts      # all the parts needed for a multi-page doc done with static HTML
       |    |--pages # pages import f...tor.js and f...tor.css relative to this location
       |    |--styles
       |    |--examples
       |
       |--index.html # the entrypoint for anyone who is looking for guidance

Вывод генерируется, как и ожидалось, и когда я запускаю dev-сервер с $>webpack-dev-server --open, он все равно обслуживает папку dist. Но я не могу на всю жизнь настроить свой webpack-dev-server так, чтобы он не искал несуществующий index.html в выходной корневой папке (dist), а вместо этого просто служил точкой входа для документации, которая является documentation/index.html. Соответствующие части моего webpack.config.js: 

module.exports = {
  entry: ...
  output: {
    filename: 'production/scripts/flabbergastor.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [...],
  },
  plugins: [
    ...
    new MiniCssExtractPlugin({ filename: 'production/styles/flabbergastor.css' }),
    new HtmlWebpackPlugin({
      template: './src/documentation/index.hbs',
      filename: 'documentation/index.html',
      inject: 'head',
    }),
  ],
  devServer: {
    // pulling my hair out trying to figure out what goes here
  },

То, что я до сих пор пробовал, это все мыслимые перестановки различных вариантов пути: 

output: {
  ...
  publicPath: ... // seems to have no effect, anyway the default is '/'
                  // and that seems about right regarding my output
},

devServer: {
  contentBase: ... // no effect,
                   // and is only meant to be used for non-webpack generated stuff
  publicPath: ...  // can only be used to offset the served output root folder

  index: 'documentation/index.html', // will serve the file, but...
                   // will cause the relative imports for css and js
                   // in this document to fail

  historyApiFallback: { index: '...' }, // no effect
},
...