使用 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 文件中.问题是配置文件的重点是您可以在部署后更改它们.如果我希望配置文件更改生效，此设置需要我重新 webpackify 一切.

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.

我认为 file-loader 可能是答案，但问题是该文件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屋！