1.entry
定义了打包后的入口文件，可以是字符串，数组和对象，如果是数组则所有文件打包为一个bundle文件；如果是对象，则将不同文件构建成不同的文件。
entry: {
//填平浏览器的坑
'polyfills': './src/polyfills.ts',
//第三供应商，包括angular，bootstrap，lodash
'vendor': './src/vendor.ts',
//应用代码
'app': './src/main.ts'
} //最后会生成三个打包后的文件
2.output
path 打包文件存放的绝对路径
publicPath 网站运行时的访问路径
filename 打包后的文件名
//开发服务会将包放进内存，不会写入硬盘
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
}
3.module
rules 定义使用加载器的规则，来处理非js文件
- test 匹配的资源类型
- loader 用来加载这种资源的加载器
其中“-loader”可以省略不谢，多个loader之间可以用！连接。
可以定义加载图片资源是，小于10k自动处理为base64图片的加载器：
{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
可以处理sass资源：
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
其中css-loader负责处理引入其他css文件，而style-loader负责将css代码加载到页面中
4.resolve
文件查找时，自动补全文件后缀
resolve: {
//处理缺少扩展名的文件，会添加扩展名后查找
extensions: ['.ts', '.js']
}
5.plugin
常用组件：
ExtractTextPlugin 用于将css等文件从js中分离成单一文件
{
//应用级样式
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
} //当css没有被抽离的时候，style加载器不会被使用
webpack.optimize.CommonsChunkPlugin 标记多个打包文件的等级体系，前面的包不会重复打包后面包中的内容
//标记三个块之间的等级体系
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
HtmlWebpackPlugin 自动注入js和css到主页中
//自动注入js和css到主页
new HtmlWebpackPlugin({
template: 'src/index.html'
})
