安裝 

cnpm i [email protected] [email protected] babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

main.js 檔案

import $ from 'jquery'
import './css/index.css'
import './css/index.scss'
// 如果要通過路徑的形式，去引入node_modules中相關的檔案，可以直接省略路徑前面的node_modules這一層目錄
//直接寫包的名稱，然後後面跟上具體的檔案路徑。
 

import 'bootstrap/dist/css/bootstrap.css'

// class關鍵字，是ES6中提供的新語法，是用來實現ES6中面向物件程式設計的方式
// java c# 實現面向物件的方式完全一樣，class是從後端語言中借鑑過來的
class Person{
    // 使用static關鍵字，可以定義靜態屬性
    // 所謂的靜態屬性，就是可以直接通過類名直接訪問的屬性。
    // 例項屬性：只能通過類的例項來訪問的屬性叫例項屬性
    static info = { name : 'li' , age : 20}
}
// 訪問Person類身上的info靜態屬性。
console.log(Person.info)
 
// 在webpack中。預設只能處理一部分ES6的新語法，一些更高階的ES6語法處理不了。需要藉助第三方的loader
// 把高階語法轉為低階的語法後會把結果交給webpack打包的bundle.js
// 通過 Babel，可以將高階語法轉換為低階語法
// 1, 在webpack中可以執行如下兩套命令，安裝兩套包，去安裝Babel相關的loader功能
// 1.1, 第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2, 第二套包 cnpm i babel-preset-env babel-preset-stage-0 -D
 

// 2. 開啟webpack的配置檔案，在module節點下的rules陣列中，新增一個新的匹配規則
// 2.1 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }  
// 2.2 在配置babel的loader規則的時候，必須把node_modules目錄通過exclude選項排除掉。
// 3, 在專案的根目錄中，新建一個叫做 .babelrc 的Babel配置檔案，這個檔案屬於json格式，所以在寫
// babel必須遵守json語法規範，不能寫註釋
// 3.1 在 .babelrc 寫如下配置
        //  {
        //     "presets" : ["env","stage-0"],    //presets語法的意思
        //     "plugins" : ["transform-runtime"]
        //  }

var p1 = new Person()

webpack.config.js 檔案

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry : path.join(__dirname,'./src/main.js'),
    output : {
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    },
    plugins : [
        new htmlWebpackPlugin({
            template : path.join(__dirname,'./src/index.html'),
            filename : 'index.html'
        })
    ],
    module : {
        rules : [
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            // 處理圖片路徑的loader. loader可以傳參跟url傳參一樣
            // limit給定的值是圖片的大小，單位是byte，如果引用的圖片大於或等於給定的limit值，則不會
            // 被轉為base64格式的字串，如果圖片小於給定的limit值，則會被轉為base64格式的字串。
            // [hash:8]-在每個圖片前加8位的雜湊值.從32位雜湊值取前8位。配置最大32
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//這是處理字型檔案的配置
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} //配置babel來轉換es6語法
        ]
    }
}

執行專案 後報錯。版本不對， npm view babel-loader versions檢視所有 版本號

這裡要求如果使用babel-core版本為6.x ， 那就必須得要使用7.x的babel-loader。解除安裝重新指定版本安裝即可。