1. 程式人生 > >webpack使用不同的js語法規範引入打包模組

webpack使用不同的js語法規範引入打包模組

編寫app.js

// es module 將sum檔案引入到app.js裡面來
import sum from "./sum"

//common.js 語法引入minus.js檔案
var minus = require('./minus')

//AMD 語法引入muti.js檔案
require(['./muti'], function(muti) {
    console.log('muti(2,3) =', muti(2,3))
})


console.log('sum(23,24) = ',sum(23,24))
console.log('minu(24,17) = ',minus(24,17))

sum.js檔案

// es module 匯出sum檔案
export default function(a,b) {
    return a + b
}

minus.js

// common.js語法 匯出
module.exports = function(a,b){
    return a - b
}

muti.js

// AMD語法匯出
define(function(require, factory) {
    'use strict';
    return function(a,b){
        return a * b
    }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

webpack.config.js

// 使用common.js規範
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].[hash:5].js'
    }
}

執行開啟webpack命令即可打包,但是如果webpack配置檔案不叫webpack.config.js就需要執行

webpack --config webpack配置檔名    來執行打包

開啟瀏覽器控制檯驗證結果