Webpack devServer - 将入口文件与资产文件分开

Question

我有以下目录结构...

/dev
    /assets
        [all imported static assets, like WOFFs, SVGs, PNGs etc...]
    /css
        styles.css
    /js
        bundle.js

/src
    /sass
        styles.scss
    /js
        scripts.js

index.html

...以及以下 Webpack 配置（真正简化）：

{
    context: './src/',
    entry: {
        'js/bundle.js': './js/scripts.js',
        'css/styles.css': './sass/styles.scss'
    },
    output: {
        filename: '../[filename]',
        path: './',
        publicPath: '/dev/assets/'
    },

    plugins: [
        new ExtractTextPlugin('../[name]')
    ],
    ...
    devServer: {
        contentBase: './',
        publicPath: '/dev/assets'
        ...
    }
}

这里的概念是默认情况下每个文件都会放在 dev/assets 文件夹中，但是对于入口文件，我可以选择将它们分组到其他文件夹中（在 /dev)，由它们的条目对象键描述（诀窍是文件名属性的 ../[filename] 值）。

这让我可以完全控制 dev 文件的文件夹和名称结构，并将其余文件（字体文件、SVG、PNG 等静态资产）收集到 dev/assets文件夹。

这在正常的 Webpack 构建中按预期工作，但相同的配置不适用于 Webpack 开发服务器，因为它只会提供 dev/assets 的文件及其兄弟文件夹的文件（如 dev/js) 无法访问。

是否有可能以某种方式使开发服务器使用所描述的功能？

更新

index.html，应@Chris R 的要求：

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/dev/css/styles.css">
    <script src="/dev/js/bundle.js"></script>
</head>
<body>

</body>
</html>

Answer 1

我使用 /dev/assets 作为 publicPath 的原因是自动将所有资产（不是条目）文件收集到 assets 文件夹中。（条目文件文件有一个 ../ 前缀，请参阅 output.filename 假装相对于 /dev 而不是 /dev/assets）。

经过一些调查，我意识到我可以在生成资产文件的特定 module.rules 中为 url-loader 和 file-loader 设置不同的 outputPath，所以我可以从 webpack 配置中删除这个丑陋的 hack。

Webpack devServer - 将入口文件与资产文件分开

Webpack devServer - separating entry files from the asset files

webpack

webpack-dev-server