成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

進(jìn)擊webpack 4 （基礎(chǔ)篇一）

jerry / 1401人閱讀

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

主題

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

項(xiàng)目初始化 安裝webpack 
yarn init -y

個(gè)人比較喜歡用yarn初始化項(xiàng)目 完成后

yarn add webpack webpack-cli -D

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


在當(dāng)前目錄下直接運(yùn)行

npx webpack

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

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

npx 會(huì)去找node_modules/.bin/webpack.cmd 文件

這個(gè)文件就做了一個(gè)判斷 判斷當(dāng)前目錄下有沒有node.exe 有就執(zhí)行當(dāng)前目錄下的webpack.js 沒有用node執(zhí)行上一級的webpack.js
webpack.js 會(huì)去找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默認(rèn)配置文件需取名webpack.config.js 或者webpackfile.js ,
所以說，我們?nèi)绻枰米远x的名字去配置， 需要在命令行里自行添加config 指定webpack用哪個(gè)配置去打包
如：

npx webpack --config [webpack-config的path]
打包之后的文件

在項(xiàng)目根目錄下新建文件webpack.config.js 并且導(dǎo)出去

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

再執(zhí)行npx webpack

看看這個(gè)bundle.js 長什么樣子

暫時(shí)不管__webpack_require__上的屬性 簡寫下就是

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

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

重點(diǎn)就是require做了什么

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

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

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

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

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

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

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

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

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

注： 如果此時(shí)index.js 內(nèi)部有import 之類導(dǎo)入其他的模塊 其他的模塊也會(huì)解析成obj的key跟value格式 他會(huì)遞歸去用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);  // 返回的是獲取模塊的函數(shù)
    console.log("webpack")");
 }

require.r 就是在exports上定義了個(gè)屬性作為標(biāo)識

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

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

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

module.l 改變true 表示當(dāng)前這個(gè)module已經(jīng)打包完成 最后返回module.exports

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102034.html

相關(guān)文章

  • 進(jìn)擊webpack4 （基礎(chǔ)篇三：配置 二）

    摘要：多頁面配置進(jìn)擊基礎(chǔ)篇一進(jìn)擊基礎(chǔ)篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式，注意數(shù)組形式會(huì)變成多入口單頁面，因?yàn)榇虬蟮臅?huì)合并成一個(gè)入口文件出口不能寫同一個(gè)文件用代替以上配置并不能多頁面，還需要個(gè)模板，并且指明各自的代碼塊去生成 多頁面配置 進(jìn)擊webpack 4 （基礎(chǔ)篇一） 進(jìn)擊webpack4 （基礎(chǔ)篇二：配置） ## 多頁面配置 ## 多頁面配置即是多入口 entr...

    sourcenode 評論0 收藏0

  • 進(jìn)擊webpack4 （優(yōu)化篇）

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

    isaced 評論0 收藏0

  • 進(jìn)擊webpack4 （基礎(chǔ)篇：配置 一）

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

    FleyX 評論0 收藏0

  • 前端進(jìn)擊的巨人（二）：棧、堆、隊(duì)列、內(nèi)存空間

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

    edgardeng 評論0 收藏0

  • 前端相關(guān)大雜燴

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

    fuyi501 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<