编写webpack的模板

---
title:编写webpack的模板
date: 2018-06-09 16:29:00
updated: 2018-06-10 12:00:00
categories:
- 构建输出
- 编程开发
tags:
- webpack
---

编写配置模板

使用模板
想这样创建一个模板。

webpack init webpack-scaffold-xx

创建构造

//generator.js
const Generator = require('yeoman-generator');
module.exports = class WebpackGenerator extends Generator {
  // 构造
  constructor(args, opts) {
    super(args, opts);
    opts.env.configuration = {
      dev: {}
    };
  }
  // ...
};

实现交互

//generator.js
const List = require('@webpack-cli/webpack-scaffold').List;

  prompting() {
    return this.prompt([
      List('confirm', 'Welcome to the demo scaffold! Are you ready?', ['Yes', 'No', 'Pengwings'])
    ]).then(answer => {
      if (answer['confirm'] === 'Pengwings') {
        // build the configuration
      }
    });
  }

配置软件

//generator.js
  dev: {webpackOptions: {}}

开发环境

//dev-config.js
module.exports = function createDevConfig(answer) {
  let devConfig = {};
};

//generator.js
const createDevConfig = require('./dev-config');
const Input = require('@webpack-cli/webpack-scaffold').Input;
Input('entry', 'What is the entry point in your app?')
 this.options.env.configuration.dev.webpackOptions = createDevConfig(answer);

更多选项

#入口
#输出
#其上下文

更多功能

# 插件 for html
Input('plugin', 'What do you want to name your html file?')

定义范围

//generator.js
this.options.env.configuration.dev.topScope = [
          'const path = require("path")',
          'const webpack = require("webpack")'
];

配置名字

//generator.js
 this.options.env.configuration.dev.configName = 'pengwings';

析抽象树

//generator.js
writing() {
    this.config.set('configuration', this.options.env.configuration);
}

参考文献
webpacl-offical-writing-a-scaffold