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的操作了