让我从头开始。
在我的应用程序中，我直接从Webpack 运行应用程序。
要构建和运行应用程序，我们使用 webpack --progress 和 webpack-dev-server --inline 命令，该命令已写在package.json 中，如下所示
"scripts": {
"serve": "webpack-dev-server --inline ",
"build": "webpack --progress"
}
当我们运行webpack --progress 命令时，它开始读取webpack.config.js 文件，并在该文件中找到如下入口点。
module.exports = {
devtool: 'source-map',
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
},
/* Embed files. */
{
test: /\.(html|css)$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/
},
/* Async loading. */
{
test: /\.async\.(html|css)$/,
loaders: ['file?name=[name].[hash].[ext]', 'extract']
},
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
然后它读取所有Typescript 文件并根据tsconfig.json 文件中声明的规则进行编译，然后将其转换为相应的.js 文件和映射文件。
如果它在没有任何编译错误的情况下运行，它将创建具有我们在 Webpack 输出部分中声明的名称的 bundle.js 文件。
现在让我解释一下为什么我们使用加载器。
awesome-typescript-loader, angular2-template-loader 我们使用这些加载器在 tsconfig.json 文件中声明的基础上编译 Typescript 文件，然后 angular2-template-loader 搜索templateUrl 和 styleUrls 声明位于 Angular 2 组件元数据中，并用相应的 require 语句替换路径。
resolve: {
extensions: ['.ts', '.js']
}
我们使用上述解析部分告诉Webpack 将Typescript 转换为JavaScript 文件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
Plugins 部分用于注入第三方框架或文件。
在我的代码中，我使用它来注入目标文件夹的index.html。
devtool: 'source-map',
上面一行用于在浏览器中查看Typescript文件并对其进行调试，主要用于开发人员代码。
loader: 'raw-loader'
上面的raw-loader用于加载.html和.css文件，并与Typescript文件捆绑在一起。
最后，当我们运行 webpack-dev-server --inline 时，它会创建自己的服务器并以web-pack.config.js 文件中提到的路径启动应用程序，其中我们提到了目标文件夹和入口点。
在Angular 2 中大多数应用程序的入口点是main.ts，我们提到了初始引导模块，例如（app.module），该模块包含完整的应用程序信息，例如所有指令、服务、模块、组件和路由实现整个应用程序。
注意：
许多人怀疑为什么index.html 只启动应用程序，即使他们没有提到任何地方。
答案是当Webpack serve 命令运行时，它会创建自己的服务，如果您没有提及任何默认页面，默认情况下它会加载index.html。
我希望所提供的信息对某些人有所帮助。