webpack(二)解析es6並打包


一、前言

ECMAScript 6(ES6)的發展速度非常之快,但現代瀏覽器對ES6新特性支持度不高,所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。
Babel是一個廣泛使用的轉碼器,babel可以將ES6代碼完美地轉換為ES5代碼,所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。

二、安裝

1、創建個文件夾,目錄如下:

 

2、安裝webpack

額外說明一下: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

 

4、安裝babel-loader

 

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命令打包

 打包后目錄:

 

 

編寫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>

結果為:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM