首页 > 解决方案 > Webpack Scaffold webpackOptions 合并不起作用,为什么?

问题描述

所以在教程webpack-scaffold-demo之后,我的webpack.config.js应该与webpack.dev.jswebpack.pro.js合并,但是这里没有添加合并。

我尝试在示例中直接将其作为对象传递,然后尝试将其作为函数传递并尝试使用类,但不幸的是,他没有将我的合并与 common 添加到我的其他配置中。

myObj.webpackOptions

依赖项(package.json)

"@webpack-cli/webpack-scaffold": "^0.1.2",
"yeoman-generator": "^3.1.1"

生成器.js

// Yeoman
const Generator = require( 'yeoman-generator' );
// Scaffold
const List = require( '@webpack-cli/webpack-scaffold' ).List;
const Input = require( '@webpack-cli/webpack-scaffold' ).Input;
// Default abstracted configs
const createCommonConfig = require( './common-config' );
const createProConfig = require( './pro-config' );
const createDevConfig = require( './dev-config' );

module.exports = class WebpackGenerator extends Generator {

    constructor( args, opts ) {

        super( args, opts );

        opts.env.configuration = {
            config: {
                webpackOptions: {}
            },
            dev: {
                webpackOptions: {}
            },
            pro: {
                webpackOptions: {}
            }
        }
    }

    prompting() {

        return this.prompt(
            [
                List( 'confirm', 'Welcome to the tnado Scaffold! Are you ready?', ['Yes', 'No', 'tnado'] ),
                Input( 'entry', 'What is the entry point in your app?' )
            ]
        ).then( answer => {

            if ( answer['confirm'] === 'tnado' ) {

                // Common
                this.options.env.configuration.config.webpackOptions = createCommonConfig( answer );
                this.options.env.configuration.config.topScope = [
                    'const path = require("path")',
                    'const webpack = require("webpack")'
                ];
                this.options.env.configuration.config.configName = 'config'; // Manipulate name

                // DEV
                this.options.env.configuration.dev.webpackOptions = {
                    mode: "'development'",
                    merge: 'common'
                };
                this.options.env.configuration.dev.topScope = [
                    'const path = require("path")',
                    'const webpack = require("webpack")',
                    'const merge = require("webpack-merge")',
                    'let common = require("./webpack.config.js")'
                ];
                this.options.env.configuration.dev.configName = 'dev'; // Manipulate name

                // PRO
                this.options.env.configuration.pro.webpackOptions = new createProConfig( answer );
                this.options.env.configuration.pro.topScope = [
                    'const merge = require("webpack-merge")',
                    'let common = require("./webpack.config.js")'
                ];
                this.options.env.configuration.pro.configName = 'pro'; // Manipulate name
            }
        } );
    }

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

所有文件都被创建,并且 topScopes 被添加,只有合并没有被添加。

我对webpack.dev.js的结果:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');

module.exports = {
    mode: 'development'

我想要什么:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');

module.exports = merge( common, {
    mode: 'development'

如果有人可以提供帮助,将不胜感激。

标签: webpackmergeconfigurationoptionsscaffolding

解决方案


解决方案:

this.options.env.configuration.dev.merge = 'common';

拉取请求:

https://github.com/webpack/webpack-cli/pull/747/files

合并拉取请求:

https://github.com/webpack/webpack-cli/blob/master/SCAFFOLDING.md#myobjmerge-optional


推荐阅读