使用 webpack 时需要生成静态文件吗？答案

【问题标题】：Do I need to generate static files when I using webpack?使用 webpack 时需要生成静态文件吗？
【发布时间】：2023-03-21 10:02:01
【问题描述】：

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

HTML 为 -jade-html-loader CSS as - sass-loader 使用 AngularJS 编写的项目 - 全部包含组件和 templateUrl (ngTemplate-loader in webpack)

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

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

我错了吗？我找不到生成静态资产（html、css）/缓存文件的好工具。最后——我需要找到一种简单的方法来将 Jade 文件作为模板（templateUrl）引入 Angular 组件，但文件必须是静态的——所以我可以在浏览器的“源”中看到它们...

这很难解释 - 所以我希望你能理解我 =(.

【问题讨论】：

标签： angularjs webpack pug

【解决方案1】：

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

【讨论】：

【解决方案2】：

一周后，我同意缓存模板的效果非常棒！ =)。

我使用插件“webpack.optimize.CommonsChunkPlugin”为我的应用生成 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 文件。

将使用过的“哈希”字符串添加到我的文件中。

我的 dist 看起来像这样：

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

webpack.optimize.UglifyJsPlugin 的小魔法可以缩小所有文件。

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

【讨论】：