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

【问题标题】：Webpack file-loader duplicate public pathWebpack 文件加载器重复的公共路径
【发布时间】：2016-07-27 23:54:22
【问题描述】：

我正在使用 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
}

希望我只是错过了一些愚蠢的东西！

【问题讨论】：

这是否真的与 Sass 有任何关系（例如，您是否需要 Sass 来重现问题）？
本身不是一个 sass 问题，更多的是“大量链接的 webpack 插件问题”。

标签： sass webpack

【解决方案1】：

使用以/ 开头的publicPath，即/dist/ 而不是dist/。

否则，您的资产的路径将被解释为相对路径，如果一个 sass 文档，例如，dist/daddy.scss 从例如dist/child.scss，孩子的路径将被解释为相对于爸爸的url“文件夹”，即dist，因此浏览器将寻找dist/dist/child.scss。

【讨论】：

我已经尝试过了，但是当应用程序托管在子目录下时它就坏了。不过，这可能会解决大多数人的用例。
你真的帮了我这个忙。

【解决方案2】：

我找到了一个修复方法，在 ExtractPlugin 中覆盖 publicPath 就是这样做的：

ExtractPlugin.extract('style', 'css!sass', { publicPath: './' })

【讨论】：