webpack打包es6代碼

1、簡單描述一下es6的模塊導入和導出的語法：

//導出：
export var aa = 10;
export function demo(){}

//不能寫成：
var aa = 10;
export aa;
或者export 10;
可以寫成：
var aa = 10;
export {aa};

//可以導出的時候命名：
var aa = 10;
export {exname as aa} // 將aa導出為exname import的時候需要按該名稱導入

// 使用 默認導出
export default {} // 這樣外部就不用指定{name1,name2 ...} 而是直接使用下面語法
import xxxx from ""; // 否則必須指定{name1,name2,.....}的語法形式。

// 導入
import {name1,name2,....} from "" 的形式導入 這是標准語法
import xxx from "" // 必須是默認導出
import * as xxx from "" // 表示全部導出

import()函數的使用(按需加載)
import()返回一個Promise對象。
使用then來觸發加載，並傳入回調函數。
例子：

 

 

 

 

 

 本來只是指定了按需加載，發現其多生成了一個資源 “0.js”，目測應該是編號的。

 

 

 

上述截圖中由於show=false，所以並未加載該模塊的js代碼。
但是往上看，show=true的時候確實加載了js代碼。

2、如何使webpack能夠識別es6語法並進行打包呢？
首先：需要安裝對應的loader
npm install babel-core babel-loader babel-plugin-transform-runtime -D // 用於轉換的包
npm install babel-preset-env babel-preset-stage-0 -D // 轉換的規則

具體配置如下：
   module:{
        rules : [
            {
                test : /\.css$/,
                use : [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test : /\.(jpg|png|gif|bmp|jpeg)$/,
                use : [
                    "file-loader",
                    "url-loader?limit=10&name=[name].[ext]"
                ]
            },
            {
                test : "/\.js$/",
                use : [
                    "babel-loader"
                ],
                exclude : /node_modules/   // 此處要排除該目錄
            }
        ]
    }

.babelrc文件：
{
    "presets" : ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

3、使用插件生成html文件

 

 

 

 目前測試的各個包的版本以及是否全局安裝

 

 需要項目本地安裝webpack-cli才能使用html-webpack-plugin否則會報模塊找不到。

 筆記比較亂，大家將就看看吧！！！