首页 > 其他分享> 文章详细

001 webpack基础 - 简介

2022-08-05 15:00:38 阅读：115 来源： 互联网

标签：文件简介 webpack add js 001 报错 minus

[A] 基本使用

　　webpack是一个静态的模块化打包工具，它以一个或多个文件作为打包的入口，将我们整个项目所有的文件编译组合成一个或者多个文件输出

[B] 功能介绍

　　webpack本身功能实有限的, 只能处理js，json资源，一旦遇到css等其他资源，就会报错

　　开发模式：仅能编译 JS 中的 ES Module 语法

　　生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

[C] 实例展示：

1. 现有文件 add.js, minus.js 两个工具文件

        // add.js
        const add = function() {
            let args = arguments
            return args.reduce((a, b) => { return a + b }, 0)
        }
        export default add

        // minus.js
        const minus = function(x, y) {
            return x - y
        }
        export default minus

2. 另有一个主文件，引用了这两个工具文件

        import add from './js/add'
        import minus from './js/minus'
        console.log(add([3, 5, 7, 9]))
        console.log(minus(10, 4))

3. 最后，在一个 index.html 文件中引入这个 main 主文件

        <script src="../main.js"></script>

问题：

执行这个html，会报错：Uncaught SyntaxError: Cannot use import statement outside a module

原因：

Nodejs支持commenJS和ES6的模块化导入导出语法，但是浏览器不支持，因此，不管使用commenJS还是ES6方法导入导出，浏览器执行均会报错

解决：

webpack进行打包，将多个文件合并成一个文件，消除模块化导入导出的语法

指令：

npx webpack ./src/main.js --mode=development

// 默认，打包后的文件路径为：dist/main.js

// 可将这段指令写入到 package.json 里面，然后通过 npm run xxx 来执行

标签：文件,简介,webpack,add,js,001,报错,minus
来源： https://www.cnblogs.com/carreyBlog/p/16553891.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

001 webpack基础 - 简介