让我从头开始。
在我的应用程序中，我直接从运行应用程序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$/]
},
{
test: /\.(html|css)$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/
},
{
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文件和映射文件。
如果它运行时没有任何编译错误，它将bundle.js使用我们在Webpack输出部分中声明的名称创建文件。
现在，让我解释一下为什么使用装载机。
awesome-typescript-loader，angular2-template-loader 我们使用这些加载器在Typescript文件中声明的基础上编译tsconfig.json文件，angular2-template-loader在Angular 2 Component元数据中搜索templateUrl和styleUrls声明内部，并将路径替换为相应的要求声明。
resolve: {
extensions: ['.ts', '.js']
}
我们使用上面的“解析”部分告诉我们Webpack要转换Typescript为JavaScript文件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
插件部分用于注入第三方框架或文件。在我的代码中，我使用它来注入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只启动应用程序，即使他们没有提到任何地方。答案是，当Webpackserve命令运行时，它会创建自己的服务，index.html如果没有提到任何默认页面，则默认情况下会加载。
我希望所提供的信息对某些人有所帮助。
The compiler does actually generateJavascript中的视图构建和更改检测有所怀疑。这不是说谎。那是编译器不是吗？而angular进行依赖注入。