重写特定文件的webpack加载程序配置

Question

我用vue-webpack-样板设置了我的新项目，在那里我使用了jsoneditor。默认的webpack配置将img目录中的所有图像资产捆绑在一起，但是jsoneditor需要它在css/img目录中的图标。

我发现了带有规则-配置的webpack.base.conf.js文件，设置如下：

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

因此，将jsoneditor-icons.svg更改为utils.assetsPath('css/img/[name].[hash:7].[ext]'),是很有意义的，但我只想将此规则应用于utils.assetsPath('img/[name].[hash:7].[ext]'),文件。

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

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

什么都没做。

有人能告诉我我的错误吗？目标是保持原来的webpack配置，并且只覆盖jsoneditor-icons.svg文件的规则。

Answer 1

问题似乎是缺少的限制:我的越位设置的options对象中的属性。

工作配置如下所示：

{
    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')],
},