webpack(二)解析es6连打包

一、前言

ECMAScript
6(ES6)的前进进度非常的快,但现代浏览器对ES6初特点支持过无强,所以若惦记以浏览器被一直使用ES6的初特色即得依靠别的工具来实现。
Babel是一个广泛应用的转码器,babel可以以ES6代表码到地转换为ES5代码,所以我们不用等及浏览器的支持即得以档次遭到以ES6的性状。

二、安装

1、创建个文本夹,目录如下:

图片 1

 

2、安装webpack

图片 2

额外说明一下:node.js
的保证安装之时节都长 --save-dev 参数,那么是参数是怎么的为?

当您呢您的模块安装一个依赖模块时,正常情形下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中之仗里(dependencies)。

-savesave-dev好省掉你手动修改package.json文件之手续。
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

 

3、 安装babel  实现 ES6 到 ES5

图片 3

 

4、安装babel-loader

图片 4

 

webpack.config.js配置

module.exports = {
    entry: './module/module1.js',
    output: {
        filename: './js/bundle.js'
    },
    module: {
        //webpack使用loader的方式处理各种各样的资源
        loaders: [{
            test: /\.js$/, //处理以.js结尾的文件
            exclude: /node_modules/, //处理除了nodde_modules里的js文件
            loader: 'babel-loader' //用babel-loader处理
        }]
    }
}

 

module2.js模块

export default {
    add: (a, b) => a * b
}

module1.js模块

import module from './module2'
console.log("计算结果为:"+module.add(5, 5))

 以上两单模块用了es6的语法

 

行webpack命令打包

图片 5

 打包后目录:

 图片 6

 

编写index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>
<script src="./js/bundle.js"></script> //引入打包文件

</html>

结果为:

图片 7