Question

假设存在以下项目结构：

public
  build/ # build artifacts i. e. JS and CSS bundles generated by webpack
  fonts/ # assets not affected by the build process
  img/
  favicon.ico
  index.html # also generated by webpack
src/
package.json
webpack.config.js
...

public是我的Web服务器的根目录，而build子文件夹是Webpack捆绑包的输出。诀窍是，我想在index html的根目录中拥有public，从Webpack输出文件夹的角度来看，它是一个上层。

现在这是我在webpack.config.js中的webpack和webpack开发服务器设置：

const isDevServer = require.main.filename.includes('webpack-dev-server');

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/templates/index.html',
      filename: isDevServer ? 'index.html' : '../index.html',
    }),
    ...
  ],
  output: {
    path: path.resolve('./public/build'),
    filename: [name].bundle.js',
    publicPath: '/build/',
  },
  devServer: {
    publicPath: '/build', // /build/ should end with a forward slash
    contentBase: path.resolve('./public'),
    historyApiFallback: {
      index: '/build',
     },
    hot: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    port: 9000,
  },
  ...
}

尽管花了一些时间才能找到一个可行的解决方案，但此配置 kinda 适用于两者开发服务器和产品构建。尽管特别是HtmlWebpackPlugin中的..index.html部分，以及{ publicPath: '/build' }中的devServer一定不能带有斜线，这确实让人闻到并且违反了文档中的建议，但看起来并不可靠。

我可能会摆脱build子文件夹，而走到平面教程，如文件夹结构，在一个dist中包含所有资产和捆绑包-例如文件夹（在我的示例中为public）。

但是，/public/build文件夹要求是否有更稳定的配置？

Webpack开发服务器的配置，输出设置为dist子文件夹

0 个答案: