设置文件 Webpack答案

【问题标题】：Settings Files Webpack设置文件 Webpack
【发布时间】：2018-01-21 23:49:43
【问题描述】：

我的项目有两个设置文件。 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

【问题讨论】：

标签： javascript webpack webpack-2

【解决方案1】：

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

首先为development 和production 创建两个单独的webpack 文件。这里webpack.config.js 将充当'开发' webpack 配置，webpack.production.config.js 将充当'生产' 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;

希望对你有所帮助。

【讨论】：

有没有办法可以在单独的文件中定义设置对象？我不想弄乱我的 webpack 配置？
我已经修改了答案。希望这会对你有所帮助。
我对这个答案的问题是 SETTINGS 变量将在编译时被设置对象多次替换。我的设置对象可能会成长为一种 CMS。我觉得这会造成臃肿。这就是为什么我希望将它们作为模块提供。

【解决方案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);

【讨论】：