webpack 2如何对webpack的配置进行修改

Question

我的webpack配置文件是由vue-cli生成的。

我需要应用下面的修改，我想这是为webpack写的，以添加resolve-url-loader。(请参阅resolve-url-loader

Apply via webpack config

It is preferable to adjust your webpack.config so to avoid having to prefix every require() statement:

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      }, {
        test   : /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
      }
    ]
  }
};

如何编辑我的webpack 2配置？它由(文件！

utils.js
vue-loader.conf.js
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js

感谢您的反馈和有用的链接。

Answer 1

我正在使用vue-cli-3，它花了相当长的时间来找出如何解决这个问题。我不得不把这个放到我的vue.config.js里

const path = require('path');

module.exports = {
  chainWebpack: config => {
    /**
     * Transform relative url() references in css files.
     */
    const resolveAfterSass = {
      use: {
        'resolve-url-loader': {
          loader: 'resolve-url-loader',
          options: {},
          before: 'sass-loader'
        },
        'sass-loader': {
          options: {
            sourceMap: true
          }
        }
      }
    };
    config.merge({
      module: {
        rule: {
          'sass': {
            oneOf: {
              'normal': resolveAfterSass,
              'normal-modules': resolveAfterSass,
              'vue': resolveAfterSass,
              'vue-modules': resolveAfterSass,
            }
          },
          'scss': {
            oneOf: {
              'normal': resolveAfterSass,
              'normal-modules': resolveAfterSass,
              'vue': resolveAfterSass,
              'vue-modules': resolveAfterSass,
            }
          }
        }
      }
    });
  }
};

这将添加所有sass/scss代码的url-resolve-loader。

Answer 2

解决..。在postcssLoader之后的build/utils.js中添加了它

build/utils.js

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  // added  reslve-url-loaderr with sourceMap true
  const resolveUrlLoader = {
    loader: 'resolve-url-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }