Question

我的设置使用带有html-webpack-plugin和webpack-dev-server的webpack 4。我项目的本质是产生一个样式库（可交付的是css，js，以及如有需要的其他图像文件和字体文件）和随附的HTML文档页面（预期的受众是将使用样式库的开发人员）。因此，我的输出具有以下结构：

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

将按预期生成输出，当我使用$>webpack-dev-server --open启动dev-server时，它会正确地服务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
},

Answer 1

好，我知道了。原来，我需要使用的选项是openPage。我们可以在webpack.config.js内部使用此选项，如下所示：

module.exports = {
  entry: ...
  output: ...
  module: ...
  plugins: ...
  devServer: {
    openPage: '/documentation/index.html'
  },
}

或者我们可以使用此选项作为命令行参数来准备package.json中的脚本，如下所示：

{
  "name": "flabbergastor-styles-lib",
  "version": "0.0.1",
  "author": "Foo MacFooface",
  "private": true,
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  },
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open-page /documentation/index.html"
  }
}

如果index.html不直接位于输出根目录中，如何为webpack-dev-server配置各种路径选项？

1 个答案: