如何使用 Vue-cli 更改规则？

Question

来自 vue-inspect 我可以读到这个：

  /* config.module.rule('fonts') */
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
    use: [
      /* config.module.rule('fonts').use('url-loader') */
      {
        loader: 'url-loader',
        options: {
          limit: 4096,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]'
            }
          }
        }
      }
    ]
  },

我想将选项 name 更改为 '[name].[ext]' 以删除前缀 fonts/。

我真的很想知道如何在不删除所有其他选项的情况下更改属性：

  chainWebpack: config => {
    const fontRule = config.module.rule('fonts').use('url-loader')
    fontRule.options({name: 'prout/[name].[ext]'})
  }

似乎一切都在 store 中，但根据 webpack-chain 手册，

Answer 1

看着 the vue-cli docs 在我看来你可以做以下事情..

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          // modify the options...
          options.fallback.options.name = '[name].[ext]'

          return options
        })
  }
}

如何使用 Vue-cli 更改规则？

How to alter a rule with Vue-cli?

javascript

webpack

vue.js

vue-cli

webpack-chain