Webpack文件加载器重复公共路径

Question

我正在使用 url-loader 和 file-loader 打包我的 Sass 文件，但遇到了图像 URL 的问题。

我尝试使用 resolve.alias 将应用程序根目录中的图像目录别名化，以便在我的 Sass 文件中使用 url(~images/myimage.png)。这对于 url-loader 来说很好用，但如果图像被 file-loader 捕获，它们将输出重复的公共路径，即 dist/dist/[hash].png，无论我是使用 ~ 还是相对路径。如果我使用图像的绝对路径，则可以正常工作，但如果我的应用程序挂载在子目录下，则会出现错误。

目录结构：

- images/
- js/
- styles/
- webpack.config.js

Webpack配置：

module.exports = {
    entry: {
        app: './js/bootstrap'
    },

    output: {
        filename: 'bundle.js',
        path: 'dist',
        publicPath: 'dist/'
    },

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractPlugin.extract('style', 'css!sass')
            },
            {
                test: /\.(gif|png|svg|jpe?g)$/i,
                loader: 'url',
                query: {
                    limit: 1000
                }
            }
        ]
    },

    resolve: {
        // add alias for application code directory
        alias:{
            js: path.resolve(__dirname, 'js'),
            styles: path.resolve(__dirname, 'styles'),
            images: path.resolve(__dirname, 'images')
        },
        extensions: ['', '.js', '.scss', '.png', '.svg', '.jpg', '.jpeg', '.gif']
    }
};

Sass 文件:

.some-class{
    background: url('~images/myimage.png') // url-loader works, file-loader doesn't
    background: url('../../../images/myimage.png') // url-loader works, file-loader doesn't
    background: url('/images/myimage.png') // both loaders work until app mounted under a sub-directory
}

希望我只是忽略了一些愚蠢的东西！

- Lee

---

这是否实际与Sass有关（例如，重现问题是否需要Sass）？ - cimmanon

不是 Sass 的问题，更多是“大量链接的 webpack 插件问题”。 - Lee

Answer 1

请使用以/开头的publicPath，例如/dist/，而不是dist/。

否则，您的资源路径将被解释为相对路径。例如，如果一个Sass文档，比如dist/daddy.scss导入另一个文档，比如dist/child.scss，那么子文档的路径将被解释为相对于父文档所在的URL“文件夹”，即dist，因此浏览器会寻找dist/dist/child.scss。

- Boris Burkov

---

我已经尝试过这个，但是当应用程序托管在子目录下时就会出现问题。虽然这可能会解决大多数人的使用情况。 - Lee

你真的帮了我很大忙。 - Hav

Answer 2

我找到了一个解决方法，覆盖ExtractPlugin中的publicPath就可以了： ExtractPlugin.extract('style', 'css!sass', { publicPath: './' })

- Lee