使用Webpack处理配置文件 [英] Handling config files with webpack

问题描述

我有一个用webpack 2构建的电子应用程序。我有一个配置文件，其中包括一个普通的webpack资源：

I have an electron app that I'm building with webpack 2. I have a config file that I'm including like a normal webpack resource:

config.js:

export default {
    config1: 1,
    config2: 2
}

main.js:

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

配置文件代码最终存储在我的 bundle.js 文件，如您所愿。问题在于配置文件的重点是您可以在部署后更改它们。如果希望配置文件更改生效，此设置要求我重新打包所有内容。

The config file code ends up in my bundle.js file as you would expect. The problem is that the point of config files is that you can change them after deployment. This set up requires me to re-webpackify everything if I want config file changes to take effect.

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

I thought file-loader might be the answer but the problem is that file loader replaces require statement with a path to a file, not the file content itself.

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

At the suggestion of @sancelot, I tried making it a separate entry point and output in my webpack config file.

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配置文件：

which did create a separate config.bundle.js file but main.bundle.js still contained its own copy of the config file internally and basically ignored config.bundle.js. For the sake of completeness, I here is the entire webpack config file:

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
    },
}

推荐答案

您必须在webpack配置中添加条目

you have to add an entry in your webpack config

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

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

这篇关于使用Webpack处理配置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！