webpack源碼泄露

1. webpack 打包能看到源碼嗎

上篇文章中寫了一份webpack最基本的配置文件來打包壓縮我們的代碼：

?

1
2
3
4
5
6
7
8
9

var path = require('path');

mole.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}

在入口文件index.js中我們引入了jQuery：

?

1
2
3
4
5
6
7
8
9

// index.js
var $ = require('jquery');
var str = require('./hello.js');

function main() {
$('body').html(str);
}

main();

2. webpack打包時怎麼避免打包jq源碼這種

確實，每次打包從入口開始，會parse所有的依賴，多的時候竟然打包一次要2秒多，簡直不能忍。然而，有幾個解決方案，最有效的，是使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的...

3. 在做webpack的DEMO時，打包CSS，為什麼類名會變亂碼

這個是將你的class名變成hash值，這樣可以防止你的樣式名重名了。獲取當然是獲取不到的，因為webpack是將你的源碼打包了，然後你設置了之後，他就變成hash值，你通過獲取原先class名想找到dom是不可能的。兩種方式，一種是不變成hash值，另外一種是使用變成hash值後再去找dom。如變成hash值後是w5ds6d3213_245ad,那麼你就通過document.getElementByClassName("w5ds6d3213_245ad").這樣就能獲得

4. 別人用webpack打包的angular網站有辦法扒下來嗎

build好的你能扒下來，但是你無法修改，無法仿作，甚至你想學習他的寫法都不行，需要打包發布前的源碼

5. webpack打包原理

webpack打包原理是根據文件間的依賴關系對其進行靜態分析，然後將這些模塊按指定規則生成靜態資源，當 webpack 處理程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

webpack有兩種組織模塊的依賴方式，同步、非同步。非同步依賴將作為分割點，形成一個新的塊；在優化了依賴樹之後，每一個非同步區塊都將作為一個文件被打包。

webpack有一個智能解析器，幾乎可以處理任何第三方庫。無論它們的模塊形式是CommonJS、AMD還是普通的JS文件；甚至在載入依賴的時候，允許使用動態表require("、/templates/"+name+"、jade")。

(5)webpack源碼泄露擴展閱讀

在使用webpack構建的典型應用程序或站點中，有三種主要的代碼類型：

1、團隊編寫的源碼。

2、源碼會依賴的任何第三方的library或"vendor"代碼。

3、webpack的runtime和manifest，管理所有模塊的交互。

runtime 包含：在模塊交互時，連接模塊所需的載入和解析邏輯；包括瀏覽器中的已載入模塊的連接，以及懶載入模塊的執行邏輯。

6. 前端構建工具webpack有什麼缺陷

1.文檔缺失，尤其中文文檔

長期以來webpack官方文檔和example匱乏，提供的一些例子都是很簡單那種，經常發現完全按照例子來配置但就是跑不起來，中文文檔就更不用說了，少的可憐。這個問題也直接導致下面的第2點。
2.配置難&難調試

稍微復雜一點的項目，如果使用webpack編譯，不經過一段痛苦不堪的配置調試過程是沒法正常跑起來的。這還沒完，在自己機器上跑起來之後可能到了另一個同事哪兒又報錯了等等。總之正如下面有人回答那樣，配置文件一旦跑起來，是根本不敢去改的，生怕又出錯。
webpack的錯誤提示也非常難看懂，基本不可能從錯誤很直觀的找到原因，長期以來碰到問題只能靠猜，你沒看錯，就是靠猜！！
3.編譯慢
經驗不足的同學很容易碰到這個問題，當然可以通過一些手段做優化，比如配置mole的resolve、root等，使用happypack加速、dll提前編譯等等。但是筆者曾經嘗試過happypack，對編譯速度有提升但效果不明顯，dll的話我有按照官方文檔的做法去做，但是最終編譯出來又報了一些莫名其妙的錯（也有可能是代碼寫的有問題），總之心累，後來直接改成externals方式，全局script引入第三方庫。
4.對server-render不友好
webpack本質上還是靜態打包，意思就是打包完成之後其實文件的載入順序已經固定，只是被載入的時間不定而已。所以使用webpack原則上不存在按需載入之類的說法，code split其實是人工分隔，但是真實的按需載入場景豈是人工能枚舉完的 （下劃線這句話不太好解釋，也不想過多解釋，熟悉前端工程的人應該都明白啥意思）。
在這里我要說的對server-render不友好其實是指html的處理，webpack其實是通過在js里用require標記資源然後載入任意資源（css、圖片、fonts等等），但其實html文件才是頁面真實的入口，最終編譯出的js還是需要引入到html里，為了防止css懶載入導致頁面抖動，編譯完的css還需要從js里邊提取出來放到html外鏈。

目前一般都是通過html-webpack-plugin來做這個事情，先搜集某個html所引用的靜態資源最終自動插入到html。這種方式對於前端渲染的應用沒有問題，但是對於server-render的那就不行了，因為server-render下html是作為模板由後端語言吐出，而開發模式下（例如webpack-dev-server）webpack是不會輸出任何文件的（開發環境webpack是將文件放到內存然後在路由層自動serve了），所以這會導致開發環境模板無法引用靜態資源。當然，有一種解決方案就是靜態資源不改變文件名稱，預先寫好路徑，開發環境和生產環境同名（即覆蓋式發布）。

7. webpack打包報javaScript heap out of memory，怎麼解決

你可以檢查一下代碼，
看看是不是哪裡內存泄露或者堆棧溢出。

8. webpack是為了解決什麼問題

配置入口沒glob式需要額外處理 目錄結構復雜file-loder面path功能太弱候自定義構建目錄結構能放目錄 源碼比較復雜遇問題看源碼要花間 沒 babel webpack ES貳0依5+ 語接受提示用指定 loader意味著支持部 ES貳0依5 語 firefox 與 chrome 瀏覽器能直接跑代碼用 webpack 編

9. 能不能再在webpack-server看源碼

類似下面這樣就可以了，entry設置為對象 每個入口設置為屬性，屬性的值是一個數組，就可以像單入口一樣往這個數組添加entry: { Profile: [ 'webpack-dev-server/client?http://0.0.0.0:8080', 'webpack/hot/only-dev-server', './profile.js'], Feed: [ 'webpack-dev-server/client?http://0.0.0.0:8080', 'webpack/hot/only-dev-server', './feed.js'] }

10. webpack打包過的代碼怎麼反編譯回來

JavaScript Document
function show(str)
{
var str1="td"+str;
var str="show"+str;
for (var i=1; i<18; i++)
{
var obj = document.getElementById('show' + i.toString());
if (obj) obj.style.display = 'none';
}
document.getElementById(str).style.display="block";
}