Question

我的项目有两个设置文件。 settings.js和settings-dev.js。两者都包含类似于以下的设置对象：

settings: {
    api: 'https://my-api.com'
    supportEmail: 'support@mysite.com',
    mainProducts: [
        {
            id: 'asdasd',
            img: 'https://testsite.com/img1.jpg'
        },
        {
            id: 'asdasd',
            img: 'https://testsite.com/img1.jpg'
        }
    ]
}

Webpack是否有可能在编译时合并这些对象并使它们在模块settings中可用，以便我可以使用以下内容来调用它：

import settings from settings

Answer 1

你可以试试这个。我修改了webpack文件，以便在代码中的任何位置访问SETTINGS变量。

首先为development和production创建两个单独的webpack文件。这里webpack.config.js将作为＆＃39; development＆＃39; webpack配置和webpack.production.config.js将充当＆＃39; production＆＃39; webpack配置。

webpack.config.js（开发）

const path = require('path');
const webpack = require('webpack');
const setting = require('./settings-dev.js');

const environment = 'development';

module.exports = {
  plugins: [
    new webpack.DefinePlugin({'SETTINGS': setting[environment]})]
};

webpack.production.config.js（制作）

const path = require('path');
const webpack = require('webpack');
const setting = require('./settings.js');

const environment = 'production';

module.exports = {
  plugins: [
    new webpack.DefinePlugin({'SETTINGS': setting[environment]})]
};

现在在package.json。

"scripts": {
  "build": "webpack --config webpack.production.config.js --progress --profile --colors",
  "dev": "webpack-dev-server --content-base src --hot --inline --open"
}

在您的代码中，您可以直接访问此SETTINGS变量。像这样

<强> app.js

var settings = SETTINGS;
var url = settings.api;

希望这会对你有所帮助。

Answer 2

我找到的解决方案是使用virtual-module-webpack-plugin-dynamic使用虚拟模块。有了这个插件，我可以根据环境编译所需的设置，然后将它们传递给插件，然后在我指定的路径上创建一个虚拟设置模块。见下面的例子：

<强> webpack.config.js

const VirtualModulePlugin = require('virtual-module-webpack-plugin');

const settingsJSON = Object.assign(
    require('./settings/general_settings.json'),
    require('./settings/development_settings.json')
)

module.exports = {
    plugins: [
        new VirtualModulePlugin({
            moduleName: 'settings/settings.json',
            contents: JSON.stringify(settingsJSON)
        })
    ],
}

<强> random_file.js

import settings from '../settings/settings.json'

console.log(settings);

设置文件Webpack

2 个答案: