webpack.config.js 在寓言中混合本地和共享配置

Question

对于 Fable 和 webpack.config.js，我遇到的情况是 devServerPort 对于某些本地用户而言与 CI 系统使用的端口不同。我想知道是否有一种标准方法或内置方法来处理本地配置，比如 webpack.local.config.js 只覆盖一个特定值。

然后，每个程序员都有他或她自己的本地配置，该配置不会进入存储库，您可以在其中覆盖默认 webpack.config.js CONFIG 变量中指定的任何共享值.

简单的替代方法是使用不同的完整配置，或者在每次回购同步后仅在本地更新端口号，但这显然并不理想。

// example of a default config:
var CONFIG = {
    // The tags to include the generated JS and CSS will be automatically injected in the HTML template
    // See https://github.com/jantimon/html-webpack-plugin
    indexHtmlTemplate: './src/Client/index.html',
    fsharpEntry: './src/Client/Client.fsproj',
    outputDir: './deploy/public',
    assetsDir: './src/Client/public',
    devServerPort: 8080,  // some users cannot use port 8080 and want a different local config
    devServerProxy: { 
        // ... etc

_{这个问题最初是在 F# Slack 上提出的，但没有收到答案，因此在此处发布以供更广泛的受众使用。}

Answer 1

确实，一种方法是为生产环境和开发环境设置不同的配置。您可以将公共部分放在另一个文件中，然后使用 webpack-merge.

所以你会喜欢：

wepback.common.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
module.exports = {
    entry: { ... },
    plugins: [ ... ],
    module: { ... },
};

webpack.development.js

const merge = require("webpack-merge");
const commonConfiguration = require("./webpack.common");
...
module.exports = merge(commonConfiguration, {
    mode: "development",
    ...
    plugins:     [
        new webpack.HotModuleReplacementPlugin(),
        ...
    ],
    devServer: {
        hot: true,
        ...
    },
    ...
});

webpack.production.js

const merge = require("webpack-merge");
const commonConfiguration = require("./webpack.common");
...
module.exports = merge(commonConfiguration, {
    mode: "production",
    optimization: {
        minimizer: [ new MinifyPlugin() ]
    },
    ...
    plugins: [
        new CleanWebpackPlugin(),
        ...
    ],
    ...
});

其他事情取决于你的构建脚本，但基本上你可以运行 webpack vs webpack-dev-server 根据你所在的位置，你可以使用 environment variables 等等上。

webpack.config.js 在寓言中混合本地和共享配置

Mixing local and shared config in fable with webpack.config.js

f#

webpack

fable-f#