Question

我有一个项目既设计为电子应用程序又设计为Chromebook应用程序/扩展，并使用webpack为每个平台创建构建。

我最近尝试向他的项目中添加一个新软件包，并且可以很好地与创建Electron版本一起使用，但是当尝试创建Chromebook版本（使用webpack {target：“ web”}时，我开始获得一系列遵循此模式的错误：

ERROR in /Users/alexisbell/project/node_modules/instascan/src/zxing.js
    Module not found: Error: Can't resolve 'fs' in '/Users/alexisbell/project/node_modules/instascan/src'

针对该错误，似乎有很多解决方案，特别是与“ fs”相关的错误，我尝试添加

node: {
   ‘fs’: 'empty'
}

按照我在https://github.com/webpack-contrib/css-loader/issues/447上找到的一些建议，对我的配置进行设置

这确实解决了“ fs”错误，但按照此模式，我仍然遇到其他错误：

ERROR in /Users/alexisbell/project/node_modules/readable-stream/lib/_stream_readable.js
    Module not found: Error: Can't resolve 'util' in '/Users/alexisbell/project/node_modules/readable-stream/lib'

我尝试查看https://webpack.js.org/configuration/node/，以尝试是否有一种方法可以使我的Web配置以类似于节点的方式工作，但我什么都找不到。

这是我的webpack配置的一部分，我排除了插件和规则之类的东西

webpack.config.js

const root = `${__dirname}/../`;
const src = `${root}src`;

const envs = {
    dev: require('./target/webpack.config.dev.js'),
    qa: require('./target/webpack.config.qa.js'),
    prod: require('./target/webpack.config.prod.js')
};

const appConfig = {
    electron: require('./app/platform/webpack.config.app.electron.js'),
    chrome: require('./app/platform/webpack.config.app.chrome.js')
};

const libConfigs = {
    electron: require('./lib/platform/webpack.config.lib.electron.js'),
    chrome: require('./lib/platform/webpack.config.lib.chrome.js')
};

module.exports = env => {
    env.buildPlatform = env.buildPlatform || 'chrome';

    // Target-specific configuration
    const envOptions = envs[env.buildTarget];
    if (!envOptions) {
        console.error('Invalid target! Specify dev, qa or prod.');
        return;
    }

    envOptions.output.path = `build/${env.buildPlatform}/${envOptions.output.path}`;
    envOptions.platform = {name: env.buildPlatform};

    // Platform-specific configurations
    if (env.buildPlatform === 'chrome') {
        envOptions.platform.lib = envOptions.platform.app = 'web';
    } else if (env.buildPlatform === 'electron') {
        envOptions.platform.app = 'electron-renderer';
        envOptions.platform.lib = 'electron-main';

    } else {
        console.error('Invalid platform! Specify chrome or electron.');
        return;
    }

    // Make libraries, app
    const configs = libConfigs[env.buildPlatform](root, src, envOptions);
    configs.push(appConfig[env.buildPlatform](root, src, envOptions));
    configs.forEach(config => config.mode = envOptions.mode);

    return configs;
};

webpack.config.app.js

const baseConfig = (root, src, options) => {
    // Apply base preferences
    return {
        entry: {
            app: './app/app.js'
        },
        context: src,
        output: {
            filename: '[name]-bundle.js',
            path: root + options.output.path,
            chunkFilename: '[name]-bundle.js'
        },
        target: options.platform.app,
        resolve: {
            modules: [
                src,
                'node_modules'
            ],
            alias: {
                app: 'app',
                util: 'app/util',
                platform: 'platform/' + options.platform.name
            },
            extensions: ['.json', '.js']
        },
        node: {
            fs: 'empty'
        },
    };
};

webpack.config.lib.js

const baseConfig = (root, src, options, entry, name) => {
    return {
        entry: entry,
        output: {
            filename: '[name]-bundle.js',
            path: `${root}${options.output.path}/libs`,
            library: name,
            libraryTarget: 'umd',
            chunkFilename: '[name]-bundle.js'
        },
        target: options.platform.lib,
        context: src,
        resolve: {
            modules: [
                src,
                'node_modules'
            ],
            alias: {
                app: 'app',
                util: 'app/util',
                platform: 'platform/' + options.platform.name
            },
            extensions: ['.json', '.js']
    };
};

您会发现我只添加了

node: {
   fs: 'emtpy'
}

进入应用程序配置。这是因为当我将fs放在这里时，fs的错误消失了，但是如果将它放在lib配置中则没有区别。

这也使我相信这是电子上的渲染过程，因为它是目标，而不是主要目标，所以我不确定为什么它在这里不起作用。

关于如何让它为chromebook正确构建的任何想法？程序包本身https://github.com/schmich/instascan似乎旨在在浏览器中运行，因此，我希望能够构建它。

Chromebook应用无法在webpack中构建，电子构建可以工作

0 个答案: