webpack多输出路径，限制public访问，还是自定义index.html？

Question

我正在使用带有 typescript 的 node-express。

我的文件夹设置如下：

.dist
  public
    public.js
    index.html
  server.js
node_modules
src
  classes
    namespace1
      module1
  public
    app - all angular files. 
    main.ts
  routes
    index.ts
  app.ts
package.json
tsconfig.json
webpack.config.js

现在，我需要 webpack 将 2 个文件输出到 /public/public.js 和 /server.js 文件夹中的 .dist。然后 nodejs 将从 .dist/server.js 运行，我想将 public.js 分开以防止客户端访问 server.js 我还使用 html-webpack-plugin 生成 html 文件。

我试过使用像

这样的小技巧

entry: {
  "server": "./src/app.ts",
  "public/public": "./src/public/main.ts"
}

但是 html-webpack-plugin 使 index.html 从 /public/public.js 而不是 public.js

加载脚本

现在，我认为我们可以通过 3 种方式解决这个问题。

让server.js使用http://localhost/public.js发送public.js，但这会使管理静态文件夹有点复杂。但我会想办法欺骗它。 问题： 如何通过 server.js 服务 public.js？
将条目设置为 "public": "./src/public/main.ts"。 问题：如何将 public.js 放入 public 文件夹？
设置 html-webpack-plugin 从 /public.js 而不是 /public/public.js 加载，并在 /public 文件夹中创建 index.html。截至目前，html-webpack-plugin 生成 <script type="text/javascript" src="../public/polyfill.js"></script><script type="text/javascript" src="../public/public.js"></script></body> 应该生成 <script type="text/javascript" src="/polyfill.js"></script><script type="text/javascript" src="/public.js"></script></body> 问题：怎么做？

或者有其他办法解决这个问题吗？我愿意接受任何建议。

谢谢

Answer 1

我想我可以回答场景 2 和 3。

2- 除了设置入口点外，您还可以设置一些输出配置。 http://webpack.github.io/docs/configuration.html#output

3- 你也可以使用复制 webpack 插件将你需要的文件复制到你的 public 文件夹中。 https://github.com/kevlened/copy-webpack-plugin

我在我的一个项目中这样做，这是我在 webpack 配置文件中添加的代码：

new CopyWebpackPlugin([
    {from: __dirname + '/src/public'}
  ])

希望这对您有所帮助。

此致。

Answer 2

我是用这个配置管理的。

module.exports = [
    {
        entry: "./src/app.ts",
        output: {
            filename: "server.js",
            path: __dirname + "/dist"
        },
        target: "node",
        resolve: {
            extensions: ['.ts', '.js', '.tsx', '.jsx']
        },
        node: {
            __dirname: false
        },
        module: { // all modules here for server
        }
    }, {
        entry: "./src/public/main.ts",
        output: {
            filename: "bundle.js",
            path: __dirname + "/dist/public"
        },
        target: "web",
        plugins: [
            new htmlPlugin({
                filename: 'index.html'
            })
        ],
        resolve: {
            extensions: ['.ts', '.js', '.tsx', '.jsx']
        },
        module: { // all your modules here. 
        }
    }
]

webpack多输出路径，限制public访问，还是自定义index.html？

webpack multiple output path, limit public access, or custom index.html?

node.js

typescript

html-webpack-plugin

webpack-2

typescript2.0