webpack+babel構建ES6語法執行環境
阿新 • • 發佈:2019-01-01
由於ES6語法在各個瀏覽器上支援的情況各不相同,所以在使用ES6語法時需要使用babel經過一次編譯,將ES6語法編譯為ES5語法,下面就開始搭建一個基於webpack+babel的ES6語法執行環境:
1.需要安裝的包
- webpack(安裝webpack,必裝)
- babel-loader和babel-core(babel轉碼器,必裝)
- babel-preset-es2015(轉碼規則,以es2015規則轉碼,必裝)
- webpack-dev-server(瀏覽器熱更新使用,選裝)
可以使用下面一條命令快速安裝:
cnpm install babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev
2.目錄結構說明
D:\ES6-ENV
│ .babelrc
│ index.html
│ package.json
│ webpack.config.js
│
├─dist
├─node_modules
└─src
└─ main.js
1.ES6-ENV: 專案名
2..babelrc:babel的配置檔案
3.index.html:訪問的頁面
4.webpack.config.js:webpack配置檔案
5.dist:webpack打包後的輸出檔案
6.src/main.js:編寫es6程式碼檔案
3.babel配置檔案.babel
{
"presets":[
"es2015"
],
"plugins":[]
}
4.webpack配置檔案webpack.config.js
var path = require('path');
module.exports = {
//入口檔案
entry:'./src/main.js',
//出口檔案
output:{
filename:'bundle.js', //出口檔名
path: path.resolve(__dirname,'dist') //出口檔案路徑
},
module:{
rules:[
{
test:/\.js$/,
use:[
{
loader:'babel-loader'
}
],
exclude: [
//排除的不轉換node_modules下面的.js檔案
path.resolve(__dirname, 'node_modules')
]
}
]
}
}
5.package.json
{
"name": "es6-env",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --port 8080 --inline --hot --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
}
}
6.執行
npm run dev