進擊webpack 4 （基礎篇一）

jerry 發(fā)布于2019-08-23 15:25 / 1386人閱讀

摘要：主題本文為的基礎部分，旨在如何從搭建一個工程環(huán)境，并簡單介紹打包之后生成什么代碼，并且介紹的常用的各種，的配置跟解決了什么問題本篇為第一篇項目初始化安裝個人比較喜歡用初始化項目完成后再在目錄里新建一個文件用于放我們的源代碼，創(chuàng)建一個作

主題

本文為webpack的基礎部分，旨在如何從0搭建一個工程環(huán)境，并簡單介紹打包之后生成什么代碼，并且介紹webpack的常用的各種loader，plugin的配置跟解決了什么問題本篇為第一篇

項目初始化 安裝webpack

yarn init -y

個人比較喜歡用yarn初始化項目完成后

yarn add webpack webpack-cli -D

再在目錄里新建一個src 文件用于放我們的源代碼，src創(chuàng)建一個index.js作為本次的入口文件 index.js 隨便輸入點什么

在當前目錄下直接運行

npx webpack

警告我們需要配置一個mode指明是生產環(huán)境還是開發(fā)環(huán)境

打包成功并且在目錄下生成一個dist文件

npx 會去找node_modules/.bin/webpack.cmd 文件

這個文件就做了一個判斷判斷當前目錄下有沒有node.exe 有就執(zhí)行當前目錄下的webpack.js 沒有用node執(zhí)行上一級的webpack.js
webpack.js 會去找webpack-cli.js
在webpack-cli的文件目錄下可以找到config-yargs.js 配置文件其中一段代碼寫明了要求什么配置文件

.options({
            config: {
                type: "string",
                describe: "Path to the config file",
                group: CONFIG_GROUP,
                defaultDescription: "webpack.config.js or webpackfile.js",
                requiresArg: true
            },

這里講明webpack默認配置文件需取名webpack.config.js 或者webpackfile.js ,
所以說，我們如果需要用自定義的名字去配置，需要在命令行里自行添加config 指定webpack用哪個配置去打包
如：

npx webpack --config [webpack-config的path]

打包之后的文件

在項目根目錄下新建文件webpack.config.js 并且導出去

const path = require("path")
module.exports = {
    mode:"development",  // 指定生產還是開發(fā)
    entry:"./src/index.js", // 入口文件
    output:{
        filename:"bundle.js", // 打包后的文件名
        path:path.resolve(__dirname,"./dist")  // 這里需指定一個絕對路徑 我們需要node的path模塊去解析路徑
    }
}

再執(zhí)行npx webpack

看看這個bundle.js 長什么樣子

暫時不管__webpack_require__上的屬性簡寫下就是

一個自執(zhí)行函數傳入一個obj 并且在里面自己定義了一個require方法返回require的執(zhí)行結果

obj的key是打包文件的path路徑， value是一個函數，方法體是用eval執(zhí)行index.js內部的代碼。

重點就是require做了什么

moduleId 就是__webpack_require__.s = "./src/index.js"

定義了一個緩存 {"./src/index.js"：...} 如果存在，也就是打包過了，則直接返回，如果沒有則創(chuàng)建一個對象

{
    i:moduleId,  // 模塊的標識
    l:false, // 表示是否打包過
    exports:{}
}

并且引用給module，
然后用modules[moduleId].call 執(zhí)行 modules 就是最外部傳入的那個自執(zhí)行函數的參數obj{"path":代碼塊}

這段代碼就是說執(zhí)行這個obj的代碼塊，上下文指向module.exports，傳入module，module.exports，跟require函數做參數

(function(module, exports) {  // module對應傳入的module（installedModules[moduleId]） ,exports對應module.exports
      eval("console.log("webpack")

//# sourceURL=webpack:///./src/index.js?");
  })

這段代碼執(zhí)行了就是輸出了"webpack"

modules[moduleId].call做的事就是執(zhí)行傳入模塊moduleId對應的代碼而已

注：如果此時index.js 內部有import 之類導入其他的模塊其他的模塊也會解析成obj的key跟value格式 他會遞歸去用require解析

比如在index.js 里 import a from "./a.js" 他的value是這樣的：

function(module, exports, require) {

"use strict";
eval("require.r(exports); 
    var a = require("./src/a.js");   // a是require執(zhí)行后返回的module.exports
    var a_default = require.n(a);  // 返回的是獲取模塊的函數
    console.log("webpack")");
 }

require.r 就是在exports上定義了個屬性作為標識

require.n就是執(zhí)行了require.d 并且返回了一個獲取模塊的方法，

require.d 就是在此函數上添加了 "a"，當訪問getter.a 的時候執(zhí)行getter

最后：
這樣層層遞歸一層層打包最終生成module.exports 返回

module.l 改變true 表示當前這個module已經打包完成最后返回module.exports

下一節(jié)預告：webpack.config.js的配置

GPU云服務器云服務器進擊千篇一律 webpack _webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102034.html

進擊webpack4 （基礎篇三：配置二）

摘要：多頁面配置進擊基礎篇一進擊基礎篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式，注意數組形式會變成多入口單頁面，因為打包之后的會合并成一個入口文件出口不能寫同一個文件用代替以上配置并不能多頁面，還需要個模板，并且指明各自的代碼塊去生成多頁面配置進擊webpack 4 （基礎篇一）進擊webpack4 （基礎篇二：配置） ## 多頁面配置 ## 多頁面配置即是多入口 entr...

sourcenode 2019-08-23 15:28 評論0 收藏0
進擊webpack4 （優(yōu)化篇）

摘要：進擊基礎篇一進擊基礎篇二配置一進擊基礎篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊，它本身不依賴于其他模塊，比如，，不去編譯這些庫，會使得打包更加快速是個正則或者包含正則的數組不去解析忽略進擊webpack 4 （基礎篇一）進擊webpack4 （基礎篇二：配置一）進擊webpack4 （基礎篇三：配置二）不解析不依賴第三方模塊的模塊 noParse 有一些第三方模塊...

isaced 2019-08-23 15:30 評論0 收藏0
進擊webpack4 （基礎篇：配置一）

摘要：進入入口起點后，會找出有哪些模塊和庫是入口起點直接和間接依賴的。用于對模塊的源代碼進行轉換。指定生產還是開發(fā)入口文件打包后的文件名這里需指定一個絕對路徑我們需要的模塊去解析路徑包含一系列的規(guī)則是一個具有屬性的對象。前文：進擊webpack 4 （基礎篇一） webpack.config.js基礎配置 webpack 有4大概念入口(entry) 輸出(output) load...

FleyX 2019-08-23 15:27 評論0 收藏0
前端進擊的巨人（二）：棧、堆、隊列、內存空間

摘要：中有三種數據結構棧堆隊列。前端進擊的巨人一執(zhí)行上下文與執(zhí)行棧，變量對象中解釋執(zhí)行棧時，舉了一個乒乓球盒子的例子，來演示棧的存取方式，這里再舉個栗子搭積木。對于基本類型，棧中存儲的就是它自身的值，所以新內存空間存儲的也是一個值。面試經常遇到的深淺拷貝，事件輪詢，函數調用棧，閉包等容易出錯的題目，究其原因，都是跟JavaScript基礎知識不牢固有關，下層地基沒打好，上層就是豆腐渣工程，...

edgardeng 2019-08-23 14:43 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0