webpack是不能解析es6語法的，需要用到外掛程式來轉化為es5和瀏覽器能識別的檔案
1.cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -d這裡我使用的cnpm指令安裝可以更快，盡量不要npm和cnpm指令混用，因為可能是npm刪掉cnpm之前安裝的包，，所以要麼一直用npm或者cnpm。這個包核心是babel-loader和core，第二個是外掛程式plugin，需要輔助用到。這裡安裝是7版本，一定要注意安裝的版本，版本不對會導致問題
2.cnpm i babel-preset-env babel-preset-stage-0 -d安裝語法對應包，作用告訴babel解釋成為什麼格式和語法
3.安裝好之後，要在檔案的根目錄建立乙個檔案.babelrc 這個是個json格式的配置檔案，目的是告訴webpack我安裝了這幾個外掛程式，所以裡面寫**：
4.然後在config裡面寫配置檔案：
var path=
require
('path'
)//安裝html-webpack-plugin來生成乙個被嵌入了bundle.js的index檔案在記憶體中
var htmlwebpackplugin=
require
('html-webpack-plugin'
)//是乙個配置物件，需要new才行
//當以命令列形式執行webpack或wabpack-dev-server的時候，工具會發現，我們並沒有提供，要打包的檔案的入口和出口檔案，此時，他會檢查根目錄中配置檔案，並讀取這個檔案,就拿到了匯出這個配置物件。然後根據對像，進行打包構鍵
module.exports=
, plugins:
[//wabpack外掛程式配置節點
newhtmlwebpackplugin()
//new 傳值],
module:
,//處理cssloader npm i style-loader css-loader -d
,//處理less檔案npm i less-loader less -d
,//處理sass檔案 npm i sass-loader node-sass -d
,//npm i url-loader file-loader -d limit 大於等於limit值不會轉為base64，小於會被轉為(ac311d0f74c8782e5a25e1940dc7681d.png
,//配置字型
,//這是babel來轉換高階es6語法]}
}
1.還需要在package.json中設定下執行指令：
,"keywords":[
],"author":""
,"license"
:"isc"
,"devdependencies":,
"dependencies"
:}
"scripts"
:,
npm run dev`寫配置檔案就是上面的config，上面已經給，不再累述控制台進入目標資料夾執行：npm run dev控制台提示成功：
瀏覽器開啟效果：
webpack中的babel配置
webpage只能處理一部分es6的新語法，更高階的語法不能處理，需要借助第三方loader將高階語法轉換為低階語法 大部分時候用不上，但是如果需要在比較低階的瀏覽器執行時，就需要使用 1.安裝babel相關的包 第一套包 cnpm install babel core babel loader 7...
webpack關聯babel手記
babel是為了把高階js語法轉為低版本語法，它跟webpack是兩個互不相關的工具，要想將它們關聯起來，需要借助到 1 babel core babel的核心模組 2 babel loader 把 babel 和 webpack 進行關聯的橋梁 3 babel preset env 預設 安裝完之...
webpack配合babel使用
babel 是乙個 j ascript 編譯器，可以把es6的語法轉為相容瀏覽器的es5語法 babel中文官網 babel可以單獨使用，但是一般都是和webpack結合一起使用 1 babel loader babel core babel preset env 換語法 安裝依賴 已經在專案裡安裝...