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

最新推荐文章于 2024-07-16 16:20:26 发布

xyphf_和派孔明

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量3.2k

点赞数

分类专栏：前端工具文章标签： webpack

本文链接：https://blog.csdn.net/xyphf/article/details/83411552

版权

前端工具专栏收录该内容

18 篇文章 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配置文件名来执行打包

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

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录