使用webpack处理配置文件

Question

我有一个电子应用程序,我正在使用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文件中,正如您所期望的那样.问题是配置文件的重点是您可以在部署后更改它们.如果我希望配置文件更改生效,这个设置需要我重新包装所有内容.

更新1:

我认为文件加载器可能是答案,但问题是文件加载器将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
    },
}

Answer 1

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

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

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