Webpack配置总结

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'
    })