Question

我即将移动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考虑打字并给我输出，我真的不需要为凉亭包装编写进口。

因此，如果我理解正确，要使用webpack，

a）我应该逃避打字，然后直接导入js    我所有的ts文件里面的文件??

据我所知，来自npm的所有js模块都可以使用模块，webpack真的需要打包文件吗？

OR

b）我应该写一个单独的vendor.ts，我应该保留    导入序列（对于js和css）我自己，

然后这样做会有点痛苦（因为我已经习惯了对它进行wiredep处理）。

但是这将允许我使用chunks-plugin
分别捆绑供应商文件

OR

c）有没有其他标准方法可以解决这个问题。

将角度1从gulp移动到webpack是一个痛点。

Answer 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捆绑node_modules for angular 1

1 个答案:

index.ts

的index.html

webpack.config.js