Question

我在我的项目中使用webpack，这是工具：

HTML as - jade-html-loader CSS as - sass-loader 用AngularJS编写的项目 - 所有组件和组件都是templateUrl（webpack中为ngTemplate-loader）

所以我在流程结束时得到了1个JS文件。所有这些东西都很酷，但我认为为客户创建静态HTML文件会很好......

它将改善性能（缓存/不需要绘制DOM元素抛出JS）并且它对浏览器更好 - 下载一些小文件，而不是一个大JS ...

我错了？我找不到能够生成静态资产（html，css）/缓存文件的好工具。在这一行的最后 - 我需要找到一种简单的方法来将Jade文件作为模板（templateUrl）放入Angular Component中，但文件需要是静态的 - 所以我可以在＆＃34; Sources＆＃34;浏览器...

很难解释 - 所以我希望你能理解我=（。

Answer 1

我去过那里，我学到的是角缓存模板比静态更快。您还可以使用npm cpy tool将静态html文件复制到dist map，但我强烈建议您使用角度缓存模板。您可以使用this tool将jade转换为html。您不需要构建一个单独的文件，您可以为供应商构建一个文件，一个用于您的应用程序，这将使您的应用程序更加干净，您还可以创建一个用于从缓存按需加载角度的模板。我希望我能解释一下。 webpack带有很多令人敬畏的插件，可以让生活更轻松！祝你好运

Answer 2

一周之后，我同意缓存模板非常棒！ =）。

我使用了插件＆＃34; webpack.optimize.CommonsChunkPlugin＆＃34;为我的应用生成2个文件：

供应商 - 所有node_modules / bower_components / libs（js + css）。
应用程序 - 所有应用程序源 - 控制器/模型/业务逻辑/视图（js，css（sass），html（jade + ngTemplate for angular））。

我的条目如下：

entry: {
    app: './src/app.js',
    vendor: [
      "angular",
      "angular-route",
      ... and other libs...
    ],
  },

在那里我找到了很酷的东西：html-webpack-plugin - 这个插件创建index.html文件并自动附加所有生成的JS文件。

添加二手＆＃34;哈希＆＃34;字符串到我的文件。

我的dist看起来像这样：

/dist
     /index.html
     /app.xxxxxxxxx.js
     /vendor.xxxxxxxxxx.js

使用webpack.optimize.UglifyJsPlugin缩小所有文件的神奇之处。

现在我有轻量级的小应用程序等待部署！ =）

使用webpack时是否需要生成静态文件？

2 个答案: