0

我用vue-webpack-boilerplate设置了我的新项目，我在其中使用了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]'),
    },
},

因此，更改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文件的规则。

4

1 回答 1

0

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

工作配置如下所示：

{
    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')],
},
于 2017-09-18T14:45:34.907 回答