Question

我使用vue-webpack-boilerplate设置我的新项目，我使用jsoneditor。默认的webpack配置捆绑了 img 目录中的所有图像资源，但 jsoneditor 期望其 css / img 目录中的图标。

我发现了带有rules-configuration的 webpack.base.conf.js 文件，其设置如下：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]'),
    },
},

因此，将utils.assetsPath('img/[name].[hash:7].[ext]'),更改为utils.assetsPath('css/img/[name].[hash:7].[ext]'),可以解决问题，但我想将此规则仅应用于 jsoneditor-icons.svg 文件。

执行exclude: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],会阻止webpack将 jsoneditor-icons 放入 / img 文件夹，但附加规则

{
    test: /.*(jsoneditor-icons.svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        name: utils.assetsPath('css/img/[name].[hash:7].[ext]'),
    },
},

没有做任何事情。

有人可以指出我的错误吗？目标是保留原始webpack配置，并仅覆盖 jsoneditor-icons.svg 文件的规则。

Answer 1

问题似乎是我的覆盖设置的选项对象中缺少 limit：属性。

工作配置如下：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
                limit: 10000,
                name: utils.assetsPath('css/img/[name].[hash:7].[ext]'),
    },
    include: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],
},
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // exclude jsoneditor icons
    loader: 'url-loader',
    options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]'),
    },
    exclude: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],
},

覆盖特定文件的

1 个答案: