Question

我已经设置了angular 2 version rc5 with webpack项目。我试图添加一些额外的东西，比如lib.ts（对于不依赖于角度的自定义库）和redirect.html页面，它将被第三方用作回调页面进行身份验证（比如Dropbox）。所以我的webpack.common.js现在看起来像

 entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts',
    'lib': './src/lib.ts'
 },
 plugins: [
     new webpack.optimize.CommonsChunkPlugin({
         name: ['app', 'lib', 'vendor', 'polyfills']
     }),
     new HtmlWebpackPlugin({
         filename:'index.html'
         template: 'src/index.html'
     }),
     new HtmlWebpackPlugin({
         filename:'dropbox.html'
         template: 'src/redirect.html',
         excludeChunks:['app']
     })
 ]

这个重定向页面只是一个普通的页面（不是一个有角度的页面），它使用lib.ts来捕获access_token，而lib.ts也被用作一个几乎包含libs.ts的服务。

现在我想为redirect.html添加脚本标记或文件，而不是为angular或index.html添加，我该怎么做？是否有一个示例处理两个或多个单独的html文件，其中一些常见的js包含一些独特的html特定js文件？

Answer 1

我使用CopyWebpackPlugin复制一个单独的静态html和js文件，该文件用于回调https://www.npmjs.com/package/copy-webpack-plugin

所以你的webpack文件就是这样的

plugins: [
 new webpack.optimize.CommonsChunkPlugin({
     name: ['app', 'lib', 'vendor', 'polyfills']
 }),
 new HtmlWebpackPlugin({
     filename:'index.html'
     template: 'src/index.html'
 }),
 new CopyWebpackPlugin([
    { context: "src/dropbox", from: "**/*" }
 ])
]

在src / dropbox中放置回调dropbox.html和dropbox_lib.js。此代码将这两个文件放在root dist中。所以你应该能够点击http://example.com/dropbox.html

我还没想出如何将主角应用程序中使用的css放入这个html文件中。

PS我是webpack的新手

Answer 2

这就是我最终做的，我使用ejs文件类型作为模板

new HtmlWebpackPlugin({
  filename: 'dropbox.html',
  template: 'src/redirect.ejs',
  chunks:['polyfills','dropbox','lib'],
  //model for ejs
  redirectPage:'Dropbox'
})

然后在dropbox.template.ejs

中

<script>
  var redirectPage = '<%= htmlWebpackPlugin.options.redirectPage %>';//'Dropbox'
</script>

如何使用常见的js和html特定的js为多个html文件配置Webpack？

2 个答案: