webpack使用不同的js语法规范引入打包模块

你的名字 2022-05-14 14:28 178阅读 0赞

编写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配置文件名    来执行打包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70][]

打开浏览器控制台验证结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70]: /images/20220504/d99243c1a5ca41a0928a66cd429c8370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70 1]: /images/20220504/c89ca15370c84b38aeabee5de0106293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_27_color_FFFFFF_t_70 2]: /images/20220504/1410c49cbe5148d991d942bbbdc61116.png