如何让 webpack 为角度 1 捆绑 node_modules答案

【问题标题】：how to get webpack to bundle node_modules for angular 1如何让 webpack 为角度 1 捆绑 node_modules
【发布时间】：2017-03-17 22:25:32
【问题描述】：

我即将移动angular 1 + typescript 项目构建设置from gulp to webpack，我唯一坚持的部分是，如何以正确的顺序bundle node_modules js 文件。

到目前为止，我一直在使用 bower 进行客户端依赖，而 gulp 有 wiredep 插件，它将查看 bower dependencies section + main section 以构建依赖顺序并使其正确捆绑。

现在我明白 webpack 的理念是不同的，我们应该依赖上传导入的任何内容，而不是依赖任何依赖部分。

为了让它工作，我需要做：将所有依赖项从 bower.json 移动到 package.json

目前我正在使用类型，tsc 会考虑类型并给我输出，我真的不需要为 bower 包编写导入。

所以，如果我理解正确，让它与 webpack 一起工作，

a) 我应该摆脱打字，然后直接导入 js 我所有的 ts 文件中的文件？

据我了解，npm 中的所有 js 模块都可以与模块一起使用，那么 webpack 真的需要类型文件吗？

或

b) 我应该编写一个单独的 vendor.ts，我应该在其中维护我自己的导入序列（用于 js 和 css），

但是那样做会有点痛苦（考虑到我习惯于为我处理它）。

但这将允许我使用块插件单独捆绑供应商文件

或

c) 有没有其他标准方法来处理这个问题。

这是将 angular 1 从 gulp 移动到 webpack 的痛点。

【问题讨论】：

标签： angularjs typescript webpack typescript-typings

【解决方案1】：

当您从将由 webpack 加载的 TypeScript 文件中导入模块时，它会从 node_modules 获取其内容并将其捆绑到输出文件中。

index.ts

import * as angular from "angular";

const myApp = angular.module("myApp", []);

myApp.controller("MyController", function PhoneListController($scope) {
  $scope.phones = [
    {
      name: "Nexus S",
      snippet: "Fast just got faster with Nexus S."
    }, {
      name: "Motorola XOOM™ with Wi-Fi",
      snippet: "The Next, Next Generation tablet."
    }, {
      name: "MOTOROLA XOOM™",
      snippet: "The Next, Next Generation tablet."
    }
  ];
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  ...
  <script src="bundle.js"></script>
</head>
<body ng-controller="MyController">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

webpack.config.js

module.exports = {
    entry: "./index.ts",
    output: {
        filename: "./bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ],
        preLoaders: [
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

将angular、@types/angular、ts-loader、source-map-loader、typescript 添加到您的packages.json 并运行webpack。

它将所有内容捆绑在一个名为 bundle.js 的文件中，您的 index.html 将使用该文件。

【讨论】：

但是第三方依赖的顺序呢...... webpack如何确保在angular-ui之前添加angular，我不确定angular-ui源代码是否会有相关的导入声明
顺序在这里并不重要，因为所有内容都将被捆绑到一个文件中。只需导入您需要在每个文件上使用的所有内容。