webpack

问题：
1、webpack用途
2、如何配置使用
3、注意事项

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

他是高度可以配置，其中有四个核心概念

入口
输出
loader
插件

webpack可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
webpack根据模块的依赖关系进行分析，这些文件会被包含到bundle.js中。webpack会给每个模块分配唯一的一个id并通过这个id索引和访问模块。

loader

webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就要需要使用loader进行转换。

如果我们需要在应用中添加css文件，就需要使用到css-loader和style-loader，他们做两件不同的事情，css-loader会遍历css文件，然后找到url()表达式然后处理他们，style-loader会把原来的css代码插入到页面中的一个style标签中。

插件

插件在webpack中的配置信息由plugins选项指定，用于完成一些loader不能完成的工作

具体配置

先看一个常见的webpack配置文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ]
}