首页 文章

Webpack devServer - 将条目文件与资产文件分开

提问于
浏览 次
0

我有以下目录结构......

/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属性的 ../[filename] 值） .

这使我可以完全控制 dev 文件的文件夹和名称结构，还可以将其余文件（静态资源，如字体文件，SVG，PNG等）收集到 dev/assets 文件夹中 .

这与正常的Webpack构建一样正常，但相同的配置不适用于Webpack dev服务器，因为它只提供 dev/assets 的文件，并且无法访问它的兄弟文件夹（如 dev/js ）的文件 .

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

Update

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>
webpack webpack-dev-server

1 回答

  • 0

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

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

    回复于

相关问题