Question

我正在使用url-loader和file-loader打包我的sass文件，但是图片网址存在问题。

我尝试使用resolve.alias为应用程序根目录中的images目录设置别名，这样我就可以在我的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
}

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

Answer 1

使用publicPath，从/开始，即/dist/代替dist/。

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

Answer 2

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

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

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

2 个答案: