webpack 2 如何将修改应用于 webpack 配置答案

【问题标题】：webpack 2 How to apply modification to webpack configwebpack 2 如何将修改应用于 webpack 配置
【发布时间】：2018-06-24 02:46:00
【问题描述】：

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

我猜我需要应用为 webpack 1 编写的以下修改，以添加 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

感谢您的反馈和有用的阅读链接...

【问题讨论】：

标签： vue.js webpack-2 resolve-url-loader

【解决方案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。

【讨论】：

【解决方案2】：

已解决...在 build/utils.js 中 postcssLoader 后添加

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
    }
  }

【讨论】：