webpack从入门到精通----（一）什么是webpack及webpack基础配置

1. 什么是webpack

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss，ts等），并将其打包为合适的格式以供浏览器使用。
可以做的事情：

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

2. 需要提前掌握的内容

• 需要node基础，以及npm的使用
• 掌握es6语法

3. webpack安装

• 安装本地的webpack
• npm install webpack webpack-cli -D

-D的意思是开发依赖，上线后不需要打包

4. webpack可以进行0配置

• 打包工具 -> 输出后的结果（js模块）
• 打包（支持模块化）

5. 手动配置 webpack

• 默认配置文件的名字 webpack.config.js

let path = require('path');
console.log(path.resolve('dist'));
module.exports = {
    mode: 'production', // 模式 默认两种 production development
    entry: './src/index.js', //入口
    output: { // 出口
        filename: 'bundle.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
    }
}

以下为打包出来的js文件

!function (modules) {
    // 先定义一个缓存
    var installedModules = {};

    // 配置了 实现了 require    
    function __webpack_require__(moduleId) {
        // 检查一下模块是否在缓存中
        if (installedModules[moduleId]) return installedModules[moduleId].exports;

        // 不在缓存中，则开始安装模块,并推入缓存中
        var module = installedModules[moduleId] = {
            i: moduleId, // index
            l: !1,  // 是否加载完成
            exports: {}
        };
        // 执行这个模块函数
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        module.l = !0;
        return module.exports
    }
    __webpack_require__.m = modules,
        __webpack_require__.c = installedModules,
        __webpack_require__.d = function (e, t, r) {
            __webpack_require__.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r })
        },
        __webpack_require__.r = function (e) {
            "undefined" != typeof Symbol &&
                Symbol.toStringTag &&
                Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
                Object.defineProperty(e, "__esModule", { value: !0 })
        },
        __webpack_require__.t = function (e, t) {
            if (1 & t && (e = __webpack_require__(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e;
            var r = Object.create(null);
            if (__webpack_require__.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e)
                for (var o in e) __webpack_require__.d(r, o, function (t) { return e[t] }.bind(null, o));
            return r
        },
        __webpack_require__.n = function (e) {
            var t = e && e.__esModule ? function () {
                return e.default
            } : function () {
                return e
            };
            return __webpack_require__.d(t, "a", t), t
        },
        __webpack_require__.o = function (e, t) {
            return Object.prototype.hasOwnProperty.call(e, t)
        },
        __webpack_require__.p = "",
        __webpack_require__(__webpack_require__.s = 0); // 入口模块
}(
    [
        function (module, exports, __webpack_require__) {
            let r = __webpack_require__(1); // 获取导出对象（其他的js文件）
            // 执行导出任务的逻辑
            console.log(r),
                console.log("hello webpack")
        },
        function (module, exports) {
            module.exports = "a" //  在这里完成了真正的对象导出。
        }
    ]
);

目前来看，其实webpack也就是自己实现了module.exports，然后通过加载入口模块，按照顺序加载其他的导出模块。

6. 修改 webpack 的默认名字

比如说修改成webpack.config.my.js

1. 命令行
   npx webpack --config webpack.config.my.js
2. 修改package.json文件

"script": {
    "build": "webpack --config webpack.config.my.js"
}

采用第二种方法之后就可以使用npm run build的操作了