使用webpack+babel來"編譯"你的JS程式碼(下)
阿新 • • 發佈：2018-12-30
上節課我們學習了
1.安裝了babel的es2015轉換器
編寫了一個簡單的es2015語法的js程式碼
let name = “zhangsan”;
2.執行了 babel index.js –out-file xxx.js 把程式碼進行轉化
3.安裝了webpack，對我們的程式碼進行打包（非es2015程式碼）
另外還需要安裝一個babel-loader
$ npm install babel-loader安裝完之後，多了
然後我們就可以執行執行 webpack
下面我們來演示：
ui.js
let name = "lily";
let age = 18;
export index.js
import {name,age} from "./ui.js";
console.log(name);
console.log(age);webpack.config.js
module.exports = {
// configuration
entry: "./es2015/index.js", //代表入口(總)檔案，可以寫多個
output: {
path: "./es2015/", //輸出資料夾
filename: "index-webpack.js" //最終打包生成的檔名
},
module: {
loaders: [
{
test: /\.js|jsx$/ 這樣我們就可以利用webpack打包es2015的js了，終端執行webpack後，es2015資料夾下生成index-webpack.js，然後我們在html中引入：
<!DOCTYPE html>
<html>
<head>
<title>es2105的寫法</title 我們分析index.js可以知道，我們是要在控制檯列印2個變數。我們到瀏覽器測試一下：
