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

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