webpack-以与Grunt相同的方式从模板创建多个输出文件

我使用Grunt已经有一段时间了，但现在我开始转向webpack，因为我开始对一些JS进行模块化和改进

这不是一个非常大的项目，同时拥有grunt和webpack似乎是一种过分的做法。我知道webpack并不能代替grunt，也许有一些合理的方法可以同时使用它们，或者我对webpack不够精通，无法以这种方式执行每项任务。我想只使用一个，但如果我不能，那么我将不得不保留他们两个

所以问题是，在Grunt中（使用Grunt替换），我可以从一个“模板”文件将Grunt配置中的一些变量替换为许多输出文件，因为它是从gruntfile的以下片段中获取的

       app1: {
        options: {
          patterns: [
            {
              match: 'FOO',
              replacement: '<%= grunt.config.get("foo_1") %>'
            },
            {
              match: 'BAR',
              replacement: '<%= grunt.config.get("bar_1") %>'
            }
          ]
        },
        src: '/myTemplate.js',
        dest: '/sw-1.js'
      },
      app2: {
        options: {
          patterns: [
            {
              match: 'FOO',
              replacement: '<%= grunt.config.get("foo_2") %>'
            },
            {
              match: 'BAR',
              replacement: '<%= grunt.config.get("bar_2") %>'
            }
          ]
        },
        src: '/myTemplate.js',
        dest: '/sw-2.js'
      },

因此，从一个模板文件创建两个输出，就像grunt替换插件在发布的片段中所做的那样

那么，是否有可能通过webpack实现这一点，或者我是否应该继续使用与现在相同的grunt配置来完成工作流的这一部分

谢谢

附言：我加入了webpack.config，以便更清楚地说明我是如何做到这一点的

webpack.common.js

const path = require('path');
    const dotenv = require('dotenv');
    const fs = require('fs');
    const webpack = require('webpack');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = (env) => {
  const currentPath = path.join(__dirname);
  const basePath = currentPath + '/.env';
  const envPath = basePath + '.' + env.ENVIRONMENT;
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  const fileEnv = dotenv.config({ path: finalPath }).parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    mode: 'development',
    entry: {
      //index: './src/index.js',
      titanpush: './src/titanpush.js',
    },
    devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin(envKeys),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

const merge = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = (env) => {
  return merge(common(env), {
    mode: 'development',
    devtool: 'inline-source-map',
    /*devServer: {
      contentBase: './dist',
    },*/
  });
};

webpack.dev.js

const path = require('path');
    const dotenv = require('dotenv');
    const fs = require('fs');
    const webpack = require('webpack');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = (env) => {
  const currentPath = path.join(__dirname);
  const basePath = currentPath + '/.env';
  const envPath = basePath + '.' + env.ENVIRONMENT;
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  const fileEnv = dotenv.config({ path: finalPath }).parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    mode: 'development',
    entry: {
      //index: './src/index.js',
      titanpush: './src/titanpush.js',
    },
    devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin(envKeys),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

const merge = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = (env) => {
  return merge(common(env), {
    mode: 'development',
    devtool: 'inline-source-map',
    /*devServer: {
      contentBase: './dist',
    },*/
  });
};

在脚本下的package.json中，我有：

"build": "webpack --config webpack.dev.js --env.ENVIRONMENT=development"

---

一开始，有两种方法：

具有多个Web包配置，每个配置用于一组定义替换。到目前为止，这是一种更易于管理的方式来完成您想要的操作，具体取决于您的配置需要多少目标文件（即定义映射）

与1类似，使用脚本来调用webpack编译器API，而不是多个命令行调用。（示例如下所示）

使用更完善的模板系统。如果您的映射足够大和复杂，那么投资于更彻底的模板+web服务器系统可能更易于维护。甚至像jekyll/Hugo/gatsby这样的静态站点生成器，这取决于它们是否允许基于表的文件生成

---

使用脚本多次运行网页包

const path = require('path');
    const dotenv = require('dotenv');
    const fs = require('fs');
    const webpack = require('webpack');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = (env) => {
  const currentPath = path.join(__dirname);
  const basePath = currentPath + '/.env';
  const envPath = basePath + '.' + env.ENVIRONMENT;
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  const fileEnv = dotenv.config({ path: finalPath }).parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    mode: 'development',
    entry: {
      //index: './src/index.js',
      titanpush: './src/titanpush.js',
    },
    devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin(envKeys),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

const merge = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = (env) => {
  return merge(common(env), {
    mode: 'development',
    devtool: 'inline-source-map',
    /*devServer: {
      contentBase: './dist',
    },*/
  });
};

Webpack可以直接在JavaScript中使用，无需CLI。这样，您就可以编写一个脚本，以您想要的任何方式获取和合并映射。例如，类似这样的内容可能会获取定义插件映射的列表，并多次运行webpack编译步骤：

const webpack = require("webpack");
// base config without define plugin mappings, and entry setting
const yourConfig = require("./webpack.config.js");

let promises = [];

for (env in envs) {
    // update the config for every run
    const config = clone(yourConfig);
    config.plugins.push(new DefinePlugin(/* get mappings from env */));
    config.output.filename = env.outputfile;

    const compiler = webpack(config);
    let promise = new Promise((resolve, reject) => {
        compiler.run(err => {
            if (err) return reject(err);

            resolve();
        });
    });

    promises.push(promise);
}

// you'd have to add error handling here
Promise.all(promises).then(_ => {
    console.log("done");
});

// webpack.config.js
module.exports = {
    entry: "template.js",
    output: {
        filename: null,
        path: __dirname + "/dist"
    }
};

---

您的问题缺少当前的结构和需求的目的。正如您所写的，为了“替换”代码中的占位符，您可以使用

DefinePlugin

。如前所述，我使用Define和DotEnv根据环境实例化一些变量。但我想输出两个不同的文件，也基于环境，但有不同的替换。它不仅仅是将几个模块捆绑在一个文件中。我将编辑这个问题并澄清这一点。谢谢d我需要的替换非常简单，但我希望它们易于管理，最好只使用一个工具，因此目前我不会尝试复杂的模板解决方案（#3）。如果我理解正确的话，您的意思是使用#1，因为我有针对不同环境的构建，我还可以定义生产所需的2个替换，测试所需的2个替换，等等？我包括了我的网页配置看起来像。这是我第一次使用webpack，所以我可能需要对您为#2编写的代码进行一些澄清。谢谢