webpack+ES6+less開發環境搭建（附帶視訊教程）

webpack是什麼https://cnodejs.org/topic/571f4e785a26c4a841ecbd7c

Webpack 是一個模組打包器。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。

百度網盤視訊下載：http://pan.baidu.com/s/1jIPJucu百度網盤線上觀看：http://pan.baidu.com/share/link?shareid=1645979812&uk=2469628767&fid=988128759555711

基本命令

	  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'] //字尾名自動補全
	  }
  };