webpack配置

首先安装Node.js，webpack需要nodejs的支持。
用npm安装webpack：

npm install webpack -g

此时webpack已经安装到了全局环境中，但是一般我们都会把webpack安装在项目依赖中：

npm install webpack --save-dev

还有webpack开发工具,需要单独安装：

npm install webpack-dev-server --save-dev

类似gulp，webpack需要创建webpack.config.js：

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: "./entry.js",
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']

            }
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style",'css!postcss')
        }]
    },
    postcss: [
        require('autoprefixer')
    ],
    plugins: [
        new webpack.BannerPlugin("Copyright snakebang 2016"),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]
};

JS

Babel是我们webpack中都会用到的loader，我们需要单独安装它：

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

然后配置一下config文件中的loader：

loaders: [{
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
                }
            },
        ...]

引用js的话，我们可以用npm安装你需要的js库，比如react和jquery，我们可以在编译的js中引入：

import $ from 'jquery';
\*或者*\
var $ = require('jquery');

CSS

css-loader的话，我们需要安装最起码的两个loader：

npm install style-loader css-loader

loader配置 :

{
    test: /\.css$/,
    loader: 'style!css'//添加对样式表的处理
 }

我们可以用 postcss-loader 和 autoprefixer 来完成自动添加浏览器前缀

/*loaders*/
 {
    test: /\.css$/,
    loader: 'style!css!postcss'
  }
/*postcss*/
postcss: [
    require("autoprefixer")
]

插件

编译完成css和js是在一个文件里的，我们可以用插件把js和css文件分离：

安装：

npm install --save-dev extract-text-webpack-plugin

配置：

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

module.exports = {
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel'，
        query: {
                presets: ['es2015', 'react']
                }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]
}