使用 webpack 处理配置文件答案

【问题标题】：Handling config files with webpack使用 webpack 处理配置文件
【发布时间】：2017-12-28 19:01:14
【问题描述】：

我有一个使用 webpack 2 构建的电子应用程序。我有一个配置文件，就像普通的 webpack 资源一样：

config.js:

export default {
    config1: 1,
    config2: 2
}

main.js:

import config from '../some/path/config';
console.log(config.config1);

如您所料，配置文件代码最终出现在我的bundle.js 文件中。问题是配置文件的重点是您可以在部署后更改它们。如果我希望配置文件更改生效，此设置需要我重新 webpackify 一切。

更新 1：

我认为file-loader 可能是答案，但问题是文件加载器将require 语句替换为文件路径，而不是文件内容本身。

更新 2：

在@sancelot 的建议下，我尝试在我的 webpack 配置文件中将其作为单独的入口点和输出。

entry: {
    main: ['babel-polyfill', path.join(__dirname, '../app/main.js')],
    config: [path.join(__dirname, '../app/config.js')]
},

output: {
    path: `${__dirname}/../build/`,
    publicPath: `${__dirname}/../build/`,
    filename: '../build/[name].bundle.js'
}

它确实创建了一个单独的config.bundle.js 文件，但main.bundle.js 在内部仍然包含它自己的配置文件副本，并且基本上忽略了config.bundle.js。为了完整起见，我这里是整个 webpack 配置文件：

import webpack from 'webpack';
import path from 'path';


export default {
    devtool: 'source-map',

    target: 'electron-main',

    entry: {
        main: ['babel-polyfill', path.join(__dirname, '../app/main.js')],
        config: [path.join(__dirname, '../app/config.js')]
    },

    output: {
        path: `${__dirname}/../build/`,
        publicPath: `${__dirname}/../build/`,
        filename: '../build/[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /index.html/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'index.html'
                    }
                }
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
            'process.env.devMode': process.env.NODE_ENV === 'development',
            'process.env.prodMode': process.env.NODE_ENV === 'production',
            'process.env.DEBUG_PROD': JSON.stringify(process.env.DEBUG_PROD || 'false')
        })
    ],

    node: {
        __dirname: false,
        __filename: false
    },
}

【问题讨论】：

我认为这应该对你有所帮助：stackoverflow.com/questions/27639005/…
是的，我确实走上了这条路，但运气不佳。我更新了我的帖子以反映该信息。
部署后更改是什么意思？您的意思是配置文件应该具有特定于部署的值吗？像 API 的秘密等等？如果是这样，结帐dotenv
@Esben，例如，假设配置文件包含日志级别（调试、信息、警告或错误）。在部署到生产后的某个时候，我想将日志记录级别从调试更改为警告。如果不重新编译，我无法做到这一点。我猜环境变量是一个选项，但我觉得配置文件更容易使用。

标签： webpack electron webpack-2

【解决方案1】：

你必须在你的 webpack 配置中添加一个条目

{
  entry: {
    app: './src/app.js',
    config: './src/config.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
 }

https://webpack.js.org/concepts/output/

【讨论】：

我试过了，它确实创建了一个单独的配置文件，但它仍然将配置数据直接添加到我的bundle.js 中，这就是它在运行时使用的配置数据。你如何告诉它从单独的config.js 文件中获取配置数据？
我需要完整的 webpack.config.js 文件
我继续发布了整个 webpack 配置文件
我看了一下，最后发现使用代码拆分更好，我想这就是你需要的。请阅读：webpack.github.io/docs/…
我认为您的建议是正确的，谢谢。但是，electron 主进程和CommonsChunkPlugin 之间似乎存在某种问题，导致应用程序无法运行。我为此创建了另一个帖子：stackoverflow.com/questions/45759756/…

【解决方案2】：

对于这种情况，我建议dotenv

对于客户端应用程序（在浏览器中运行），我建议envify。

这两个建议都易于遵循设置指南。

【讨论】：

问题是关于在运行时处理配置，你的答案是关于构建时间。