001 webpack基础 - 简介

[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