webpack教程，webpack+ES6+less視頻教程

webpack百度網盤視頻教程：http://pan.baidu.com/s/1mhBZvwG
webpack是什麼
Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。

基本命令

      webpack         // 最基本的啓動webpack的方法
      webpack -w      // 提供watch方法；實時進行打包更新
      webpack -p      // 對打包後的文件進行壓縮
      webpack -d      // 提供source map，方便調式代碼

全局安裝

      # npm install webpack -g 項目安裝：
      # 進入項目目錄
      # 確定已經有 package.json，沒有就通過 npm init 創建
      # 安裝 webpack 依賴
      # npm install webpack --save-dev

使用ES6

    安裝 babel-loader： 
    # npm install babel-loader --save-dev 安裝轉碼規則：       
    # npm install babel-preset-es2015 --save-dev
    ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
    # npm install --save-dev babel-preset-stage-0
    # npm install --save-dev babel-preset-stage-1
    # npm install --save-dev babel-preset-stage-2
    # npm install --save-dev babel-preset-stage-3

參考格式：
    {
        test: /\.js$/,
        loader: 'babel?presets[]=es2015,presets[]=stage-0'
    }

編譯css

安裝css-loader：  
    # npm install css-loader  --save-dev
    安裝style-loader  
    # npm install style-loader  --save-dev
    參考格式：
    {
        test: /\.css$/,
        loaders: ['style', 'css', 'autoprefixer']
    }

編譯less

# npm install less --save-dev
    安裝less-loader： 
    # npm install less-loader --save-dev
    參考格式：
    {
        test: /\.less/,
        loaders: ['style', 'css', 'autoprefixer', 'less'],
    }

使用autoprefixer自動補上瀏覽器兼容

# npm install autoprefixer-loader --save-dev
    參考格式：
    {
        test: /\.css$/,
        loaders: ['style', 'css', 'autoprefixer']
    }, {
        test: /\.less/,
        loaders: ['style', 'css', 'autoprefixer', 'less'],
    }

編譯文件

安裝file-loader： 
    # npm install file-loader --save-dev
    參考格式：
    {
        test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
        loader: 'file-loader?name=[hash].[ext]'
    }

編譯圖片

# npm install url-loader --save-dev
  參考格式：
  {
      test: /\.(png|jpg)$/,
      loader: 'url?limit=1200&name=[hash].[ext]'
  }

編譯JSX

# npm install jsx-loader --save-dev
  # npm install babel-preset-react --save-dev
  參考格式：
  {
      test: /\.jsx$/,
      loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']
  }

示例源碼

在項目目錄下，新建一個webpack.config.js文件，把下面代碼複製進去，然後在新建一個app.js和index.js文件，寫上console.log(‘你好世界’);
執行命令：webpack 然後找到build目錄就看到編譯後的文件了

 var webpack = require('webpack');

  module.exports = {
      entry: {
          app: './app', //編譯的入口文件
          index: './index', //編譯的入口文件
      },
      output: {
          publicPath: '/build/', //服務器根路徑
          path: './build', //編譯到當前目錄
          filename: '[name].js' //編譯後的文件名字
      },
      module: {
          loaders: [{
                  test: /\.js$/,
                  loader: 'babel?presets=es2015'
              }, {
                  test: /\.css$/,
                  loaders: ['style', 'css', 'autoprefixer']
              }, {
                  test: /\.less/,
                  loaders: ['style', 'css', 'autoprefixer', 'less'],
              }, {
                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
                  loader: 'file-loader?name=[hash].[ext]'
              }, {
                  test: /\.(png|jpg)$/,
                  loader: 'url?limit=1200&name=[hash].[ext]' //注意後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片
              }
          ]
      },
      plugins: [
              new webpack.optimize.CommonsChunkPlugin('common.js') //將公用模塊，打包進common.js
      ],
      resolve: {
          extensions: ['', '.js', '.jsx'] //後綴名自動補全
      }
  };

原文：http://cnodejs.org/topic/571f4e785a26c4a841ecbd7c