道招

从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

在我们讲到从vuecli3学习webpack记录(一)vue-cli-serve机制

vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在config文件夹里面的(teserOptions.js和html除外)是调用api.chainWebpack方法,该方法会将传得的参数(该参数是一个方法)push到this.service.webpackChainFns数组。

今天就展开看看里面具体是什么。

  1. this.service其实就是cli3里面的Service(node_modules/@vue/cli-service/lib/Service.js)的实例,通过api.registerCommand方法将对应的serve(就是npm run serve那个serve)等command加入到this.commands这个对象属性里面,通过api.chainWebpack方法将app、base等webpack配置加入到this.webpackChainFns这个数组属性里面。
  2. 上面的api其实是PluginApi(node_modules/@vue/cli-service/lib/PluginApi.js)的实例,

部分代码如下

// node_modules/@vue/cli-service/lib/PluginApi.js
constructor (id, service) {
    this.id = id
    this.service = service
  }

registerCommand (name, opts, fn) {
    if (typeof opts === 'function') {
      fn = opts
      opts = null
    }
    this.service.commands[name] = { fn, opts: opts || {}}
  }

  chainWebpack (fn) {
    this.service.webpackChainFns.push(fn)
  }

cli3帮我们配置的默认配置是怎么进去的呢? 在此之前,我们先看看这些配置长什么样吧,以node_modules/@vue/cli-service/lib/config/base.js为例 我们一般在webpack里面是这样配置它

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ]
}

而在cli3里面这样配置

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
        webpackConfig.module
              .rule('vue')
                .test(/\.vue$/)
                .use('cache-loader')
                  .loader('cache-loader')
                  .options(vueLoaderCacheConfig)
                  .end()
                .use('vue-loader')
                  .loader('vue-loader')
                  .options(Object.assign({
                    compilerOptions: {
                      preserveWhitespace: false
                    }
                  }, vueLoaderCacheConfig))

        webpackConfig
              .plugin('vue-loader')
              .use(require('vue-loader/lib/plugin'))

        webpackConfig.module
              .rule('images')
                .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
                .use('url-loader')
                  .loader('url-loader')
                  .options(genUrlLoaderOptions('img'))
     })
}

可以看出webpack的配置可以以链式调用的方式添加,这样就可以以更加灵活的函数式添加配置了。 webpackConfig是什么鬼,这就要再次回到Service.js了,看它是怎执行webpackChainFns数组里面的函数了

const Config = require('webpack-chain')

resolveChainableWebpackConfig () {
    const chainableConfig = new Config()
    // apply chains
    this.webpackChainFns.forEach(fn => fn(chainableConfig))
    return chainableConfig
}

再看看webpack-chain

const ChainedMap = require('./ChainedMap');
const ChainedSet = require('./ChainedSet');
const Resolve = require('./Resolve');
const ResolveLoader = require('./ResolveLoader');
const Output = require('./Output');
const DevServer = require('./DevServer');
const Plugin = require('./Plugin');
const Module = require('./Module');
const Optimization = require('./Optimization');
const Performance = require('./Performance');

module.exports = class extends ChainedMap {
  constructor() {
    super();
    this.devServer = new DevServer(this);
    this.entryPoints = new ChainedMap(this);
    this.module = new Module(this);
    this.node = new ChainedMap(this);
    this.optimization = new Optimization(this);
    this.output = new Output(this);
    this.performance = new Performance(this);
    this.plugins = new ChainedMap(this);
    this.resolve = new Resolve(this);
    this.resolveLoader = new ResolveLoader(this);
    this.extend([
      'amd',
      'bail',
      'cache',
      'context',
      'devtool',
      'externals',
      'loader',
      'mode',
      'parallelism',
      'profile',
      'recordsInputPath',
      'recordsPath',
      'recordsOutputPath',
      'stats',
      'target',
      'watch',
      'watchOptions',
    ]);
  }

  toConfig() {
    const entryPoints = this.entryPoints.entries() || {};

    return this.clean(
      Object.assign(this.entries() || {}, {
        node: this.node.entries(),
        output: this.output.entries(),
        resolve: this.resolve.toConfig(),
        resolveLoader: this.resolveLoader.toConfig(),
        devServer: this.devServer.toConfig(),
        module: this.module.toConfig(),
        optimization: this.optimization.entries(),
        plugins: this.plugins.values().map(plugin => plugin.toConfig()),
        performance: this.performance.entries(),
        entry: Object.keys(entryPoints).reduce(
          (acc, key) =>
            Object.assign(acc, { [key]: entryPoints[key].values() }),
          {}
        ),
      })
    );
  }
}

原来它针对webpack的配置里面的每一个大项都设置了不同的属性,并且分配以不同的方式实现。我们还可以看到里面有个toConfig方法,它会将最终的配置返回为我们熟悉的对象形式 的wepback配置,毕竟webpack只认这种配置。 下面就以this.module为例吧,因为看到它的链式调用里面有个end方法,会让链式调用调回去,方便执行后续的use('vue-loader')

// node_modules/webpack-chain/src/Module.js
module.exports = class extends ChainedMap {
  constructor(parent) {
    super(parent);
    this.rules = new ChainedMap(this);
    this.defaultRules = new ChainedMap(this);
    this.extend(['noParse']);
  }
}

Module继承ChainMap,而ChainMap又继承自Chainable,我们要看的end方法就是在这里

// node_modules/webpack-chain/src/Chainable.js
module.exports = class {
  constructor(parent) {
    this.parent = parent;
  }

  batch(handler) {
    handler(this);
    return this;
  }

  end() {
    return this.parent;
  }
};
更新时间:
上一篇:webpack笔记——hook执行时call的是什么下一篇:webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks

相关文章

从vuecli3学习webpack记录(零)整体流程

今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手 阅读更多…

用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 阅读更多…

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…

从vuecli3学习webpack记录(二)webpack分析

上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise,所以后面还接着 .cat 阅读更多…

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

以webpack为例来看微内核架构

微内核系统一般分为两个部分—— 核心系统 和 插件系统 ,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如 阅读更多…

关注道招网公众帐号
道招开发者二群