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 来执行