Webpack 开发服务器设置有问题答案

【问题标题】：Having troubles with Webpack Dev Server settingsWebpack 开发服务器设置有问题
【发布时间】：2016-12-17 21:45:34
【问题描述】：

我的项目大致有以下结构：

Webpack 将静态资源放在 public 文件夹中。

    output: {
        path: resolve('public'),
        filename: 'bundle.js'
    },

我想做的是让 Webpack Dev Server 从 src 文件夹中服务 index.html，但从 public 文件夹中请求静态资产。这可能吗？文档说，将index.html 文件放在构建文件夹中，但是如果可以设置开发服务器以提供来自public 文件夹的静态资产，那么就没有理由将index.html 复制到那里好吧。

我尝试了以下配置，但没有成功：

在 package.json 中：

webpack-dev-server --inline --history-api-fallback --content-base src

在 webpack.config.js 中：

    output: {
        path: resolve('public'),
        publicPath: '../public',
        filename: 'bundle.js'
    },

附加信息，如果重要的话：我也在我的路由器中进行代码拆分，以便我得到一些从父级请求的较小的捆绑包（0.bundle.js、1.bundle.js 等）当应用切换到相应的路由时捆绑（bundle.js）。

我意识到主包使用 Webpack 配置的output 参数的publicPath 选项创建到依赖包的链接。在我上面展示的示例中，publicPath 是/；因此，如果我从public 文件夹中提供index.html 并且index.html 需要bundle.js，那么bundle.js 将需要来自同一文件夹的0.bundle.js。另一方面，如果我将publicPath 设置为/public，那么放在public 文件夹中的index.html 将具有bundle.js，这将需要来自public/public 文件夹的0.bundle.js。

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

只想说，虽然我还没有找到原始问题的答案，但我意识到更好的设置是使用HTMLWebpackPlugin，将index.html 作为template 选项传递给它。该插件会自动引用我的脚本文件，将它们添加到模板中，并将生成的 html 放在输出路径（public 文件夹）中。

再高兴不过了！

【讨论】：