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否则会报模块找不到。

笔记比较乱，大家将就看看吧！！！

猜你喜欢