Question

我有一个简单的webpack应用程序index.html，main.js，可以很好地构建。

我还有一个自包含的javascript文件iframe.js，该文件将添加到第三方网站，该网站将添加一个引用webpack应用程序的iframe容器：

<iframe src="https://webpack-app-domain.com/index.html">

我希望Webpack构建使用以下类型的process.env替换来处理iframe.js：

<%= process.env.IFRAME_URL %>

并让babel将其转换为ES5 javascript，并最小化用于生产的输出，但是我不希望iframe.js成为Manifest的一部分，也不希望脚本中引入其他依赖项。

这不是webpack的“入口”。

如果我将其放置在/ static文件夹中，它将被部署，保持不变，但随后我将无法使用任何process.env变量对其进行自定义，也无法进行转换或缩小。

如果我将其添加为单独的webpack“条目”，则会对其进行编译和缩小，但也将其包装在清单函数调用中：webpackJsonp（），但我需要JavaScript是自包含的。

如何使用Webpack构建版本处理此javascript文件以满足我的要求？

编辑：感谢您的答复。我对CopyWebpackPlugin进行了内联转换，以实现所需的结果：

const UglifyJS = require('uglify-js')
const babel = require("babel-core")

...

new CopyWebpackPlugin([
  {
    from: 'src/iframe.js',
    to: '',
    transform(content, path) {
      let js = content.toString('utf8')
      js = js.replace(new RegExp("process.env.IFRAME_URL", 'g'), env.IFRAME_URL)
        .replace(new RegExp("process.env.ROOT_API", 'g'), env.ROOT_API)
      let t = babel.transform(js, {
        presets: ["env"]
      })
      if (t.error) throw t.error
      js = t.code
      let min = UglifyJS.minify(js)
      if (min.error) throw min.error
      js = min.code.toString()
      return Buffer.from(js)
    },
  },
])

我不确定这是否是最优雅的方法，但确实可以。它正在复制原本会被绕过的插件管道。

Answer 1

我看不到@FXML public void onjosephclick() { //weekPickerInput(); //You can delete from here //addFilmsInList(); //filmList.setShowLocation("Joseph P"); //System.out.println("joseph button pressed"); //try { // Pane pane = FXMLLoader.load(getClass().getResource("scenes/josephpane.fxml")); // seatsSelection.getChildren().setAll(pane); //} catch (IOException e) { // System.out.println(e); //} //setStuff(); //seatsavailable.setText(Integer.toString(seatsJoseph)); //filmPrice = filmList.searchFilm().get().getPrice(); //System.out.println("Price:"+filmPrice); //Down to here genericOnClick("Joseph P","scenes/josephpane.fxml",seatsJoseph); //change the strings for each call and remove the unnecessary stuff //in the methods it will clean it up a lot } private void genericOnClick(String location, String resourceLocation, int seats) { weekPickerInput(); addFilmsInList(); filmList.setShowLocation(location); System.out.println("Location:"+location); try { FXMLLoader loader = new FXMLLoader(getClass().getResource(resourceLocation)); Pane pane = loader.load(); TheatresController controller = loader.getController(); controller.setDashBoardUserControllerReference(this); seatsSelection.getChildren().setAll(pane); } catch (IOException e) { System.out.println(e); } setStuff(); seatsavailable.setText(Integer.toString(seats)); filmPrice = filmList.searchFilm().get().getPrice(); System.out.println("Price:"+filmPrice); }与该问题有关。

我的答案：将manifest.json与自定义命令一起使用以进行单独的Webpack构建。在一个项目中有多个编译步骤并不少见。

如果使用的是externals，则可以将其添加到package.json部分，如果使用的是命令行，则只需编写shell脚本之类的东西。

scripts

然后，您可以自由地将依赖项构建与项目构建分开，并将结果作为外部项包含在主项目中。

Answer 2

您是否尝试过使用copy-webpack-plugin？

这样，您将与复制单个文件并行运行常规构建。您可以使用transform方法替换process.env.*的文件内容，并将其输出到所需的目的地。

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      {
        from: 'src/*.png',
        to: 'dest/',
        transform(content, path) {
          return optimize(content);
        },
      },
    ]),
  ],
};

在不使用清单的情况下将JavaScript文件添加到Webpack构建中

2 个答案: