有著 安裝webpack package 頁面 如圖所示 ins 部分 二次 令行

博客還是要簡單記錄一下的，美劇看完了，於是決定學習，想起來webpack還沒學啊，大物就先放一放，然後就開始找教程，慕課上某免費視頻。

那webpack是啥呢？

如圖所示：

是不是不太看得懂？（我怎麽覺得我的博客畫風清奇） 其實我也不太看得懂（看圖的感覺就是資源文件其實有很多，然後他們相互之間的關系，webpack將它們整合為右邊的那些靜態web資源文件），官方用語即：Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區湧現出了很多好的實踐方法

• 模塊化，讓我們可以把復雜的程序細化為小的文件;
• 類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能轉換為JavaScript文件使瀏覽器可以識別；
• Scss，less等CSS預處理器
• ...

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。

所以其實Webpack就是要：把項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript文件。

這是第二次寫這個博客了...之前的丟了 有點不記得了..

進入最讓人頭疼的部分

安裝和創建項目

會想著弄這個，是因為想學vue來著，然後提到了這個，於是就趁十一看一看..看看這種打包工具到底有啥好處，所以如果你要裝webpack呢...先得有npm,我當時是直接下的node（後來思考為啥我沒先學node...）

npm是隨nodeJs安裝包一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題；

常見的使用場景有以下幾種：

• 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

nodejs的官網地址：https://nodejs.org/en/ nodejs中文網地址：http://nodejs.cn/ 從node.js官網下載最新安裝包進行安裝

檢測npm是否安裝：輸入命令查看一下版本號：

npm -v

我之前裝的時候看到了說npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，所以使用淘寶鏡像 cnpm。 https://blog.csdn.net/Small_Lee/article/details/68062223 （我當時看的別人的博客） 使用npm將webpack安裝到全局環境中：

npm install webpack -g

依舊查看當前webpack的版本號

webpack -v，

進入項目目錄，生成package.json文件

npm init，

為項目添加webpack依賴

npm install webpack --save-dev

將hello.js編譯並打包到hello.bundle.js（我看的慕課一個免費的視頻，跟著那個建的hello.js）

webpack hello.js hello.bundle.js， // 也看到過別的命令 webpack hello.js bundle.js

這個時候問題來了，報錯 “cannot found module xxx” （之前的報錯忘記保存了） 我查了很多博客，各種，然後它提示過好幾次我C盤裏裝的那個node_modules巴拉巴拉，然後我看了一下那個裏面有個webpack-cli 一直提示我那個有問題，然後我看到有一個博客終於說對了我的問題所在，貼出博客 https://blog.csdn.net/yhlysy/article/details/80401876 前面有提到過查版本號，然後這裏webpack版本比較高 在4的時候將webpack-cli分離出來了。 所以是安裝webpack-cli的時候沒有裝全局（在前面的安裝操作中，會有彈出來一個什麽說問你要不要搞webpack-cli 具體不記得了 有這個印象 ） 然後我就按著博客指令：

npm install --save-dev webpack-cli -g

好，又報錯了

然後查到別人博客說，又是版本問題，恩...版本很讓人腦殼疼 命令已不適用 https://blog.csdn.net/gujinapenggu5/article/details/82021817

於是又改用打包命令

webpack demo.js -o demo.bundle.js

成功之後它會給你一些信息，比如哈希值，webpack的版本號啊之類的，列表信息依次是打包文件 大小 打包的塊 打包的塊名稱，

OK 現在又有問題來了，在寫了css文件，想看一下css文件是怎麽被他運行工作的。

這個時候 loader 得出現了，

依舊報錯

這裏有一個問題要註意，在hello.js裏require文件的時候

require ( ‘ style-loader ! css-loader ! . / style . css ‘ ) ; //我跟著老師寫的時候沒有加上style-loader 只加了css-loader 就報錯了

看我的第2和3個塊那裏可以發現現在運行OK了

據說因為版本問題，現在生成的bundle.js是壓縮過的，代碼很亂（主要是看不懂），也會多一些其他他自己自定義的函數。所以ctrl f一下 還是能找到我們打包之後的處理的代碼的

這裏要註意的一個問題是 你html頁面應該引用的並不是hello.js了 而是hello.bundle.js了 不然會報錯。 一個困擾了我半天的問題：

這個地方我們是require了對吧，然後我運行打包，然後再打開這個頁面。並沒有任何效果，查看控制臺,報錯說是require is not define,. 最後解決了，是我index.html引用js文件的時候，引用的是hello.js 而不是 hello.bundle.js ，這是一個很大的問題 我看了別人的解釋，讓我理解了一點webpack 。我們最初為什麽要用webpack呢 是因為你的瀏覽器是不支持你所寫的模塊化的方式，所以才需要借助webpack進行模塊化處理。 那現在它幫我把我不會被識別的js 文件 裝成了一個能識別我require的文件，所以我的用那個能識別我的模塊化的文件

然後最後一個要提一下的命令是

這樣會方便一些，不用不停的打包。他會監聽

以上是主要的安裝和初上手會遇到的問題，沒錯 可能只有我會遇到... 反正報錯那麽多 早晚會遇到 我就是踩坑神手 我驕傲我自豪

webpack踩坑記錄（一）