本質上，webpack?是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個?bundle。

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。

?

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。

接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。

cnpm install css-loader style-loader

執行以上命令后，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。

接下來創建一個 style.css 文件，代碼如下：

app/style.css 文件

body { background: yellow; }

修改 runoob1.js 文件，代碼如下：

app/runoob1.js 文件

require("!style-loader!css-loader!./style.css"); document.write(require("./runoob2.js")); //requirea依賴文件

接下來我們使用 webpack 命令來打包：

webpack runoob1.js -o bundle.js

?

在瀏覽器訪問，輸出結果如下所示：

require CSS 文件的時候都要寫 loader 前綴?!style-loader!css-loader!，當然我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。 將 runoob1.js 中的?require("!style-loader!css-loader!./style.css")?修改為?require("./style.css")?：

app/runoob1.js 文件

require("./style.css"); document.write(require("./runoob2.js"));

然后執行：

webpack runoob1.js -o? bundle.js --module-bind 'css=style-loader!css-loader'

在瀏覽器訪問，輸出結果如下所示：

顯然，這兩種使用 loader 的方式，效果是一樣的。

---

配置文件

我們可以將一些編譯選項放在配置文件中，以便于統一管理：

創建 webpack.config.js 文件，代碼如下所示：

app/webpack.config.js 文件

module.exports = {entry: "./runoob1.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]} };

接下來我們只需要執行 webpack 命令即可生成 bundle.js 文件：

webpackHash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576msAsset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main[0] ./runoob1.js 65 bytes {0} [built][5] ./runoob2.js 46 bytes {0} [built]+ 4 hidden modules

webpack 命令執行后，會默認載入當前目錄的 webpack.config.js 文件。

---

插件

插件在 webpack 的配置信息 plugins 選項中指定，用于完成一些 loader 不能完成的工。

webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。

使用內置插件需要通過以下命令來安裝：

cnpm install webpack --save-dev

比如我們可以安裝內置的 BannerPlugin 插件，用于在文件頭部輸出一些注釋信息。

修改 webpack.config.js，代碼如下：

app/webpack.config.js 文件

var webpack=require('webpack');module.exports = {entry: "./runoob1.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]},plugins:[new webpack.BannerPlugin('菜鳥教程 webpack 實例')] };

然后運行:

webpack

打開 bundle.js，可以看到文件頭部出現了我們指定的注釋信息。

---

開發環境

當項目逐漸變大，webpack 的編譯時間會變長，可以通過參數讓編譯的輸出內容帶有進度和顏色。

webpack --progress --colors

如果不想每次修改模塊后都重新編譯，那么可以啟動監聽模式。開啟監聽模式后，沒有變化的模塊會在編譯后緩存到內存中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。

webpack --progress --colors --watch

當然，我們可以使用 webpack-dev-server 開發服務，這樣我們就能通過 localhost:8080 啟動一個 express 靜態資源 web 服務器，并且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯后的資源輸出，并且通過一個 socket.io 服務實時監聽它們的變化并自動刷新頁面。

# 安裝 cnpm install webpack-dev-server -g# 運行 webpack-dev-server --progress --colors

在瀏覽器打開 http://localhost:8080/ 輸出結果如下：

?

?

上述內容是來自菜鳥教程Webpack 入門教程學習；

詳細webpack API參考?https://www.webpackjs.com/concepts/

webpack的時候,出現各種問題,下面是轉載https://blog.csdn.net/LPLIFE/article/details/80875815，基本包含了各種初學錯誤如下

?

使用步驟

一.確保已經安裝了nodeJS之后.

二. 創建webpack-demo,我的是f盤下的,

?

2.然后進入這個文件夾:

?

3.進行初始化,一路都是選擇默認(回車就可以):

查看初始化后的文件夾,里面只有一個json文件:

?

4.??接下來裝webpack

npm install webpack --save-dev

安裝完成:

查看項目下,發現已經:

5.然后用編譯器打開當前項目,我的是HBuilder,如下圖:

在這個文件下創建一個demo.js文件,并創建一個函數.

?

6.然后我們嘗試進行打包,回到命令框

原本輸入了 webpack demo.js demo.bundle.js,然后報錯了

這是為什么呢?原因是我的webpack版本過高,原來的命令已經不適用了

如下查詢版本號:

那應該如何解決?

更換打包命令為: webpack demo.js -o demo.bundle.js

其中 demo.dundle.js是打包后生成的文件的文件名

其中的一些參數值:

Version:webpack版本

time:這次打包所花費的時間

列表信息

Asset:打包這次生成的文件

Size:這次生成文件的大小

Chunks:這次打包的分塊

chunk Names:這次打包的名稱

接下來查看以下項目:

可以看到demo.js已經被打包為了demo.bundle.js文件,但是,這個并沒有打包成功! 因為打包的時候沒有出現紅色的error了,但是還有黃色的警告.如下圖.

黃色警告:是因為webpack4引入了模式,有開發模式,生產模式,無這三個狀態

以及打開我們生成的文件,代碼如下:

??可以看到末尾并沒有生成我們所打包的demo.js的信息.

黃色部分的警告的意思是,沒有設置模式,有開發模式和生產模式兩種,接下來,找到package.json.添加上"dev"和"build"這兩個信息以及他們的值.

?

??"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode deveplopment","build": "webpack --mode production"},

先了解兩個命令:

npm run dev (開發環境輸出的demo.js沒有壓縮),也就是這個形式的,如下圖,這是平時我們寫代碼的形式:

npm run build (生產模式輸出的demo.js壓縮過) ,如下圖:

?

????7.全局安裝webpack-cli

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

8. 安裝完成后, 輸入命令??npm run dev

看到這么多錯誤貌似有點頭疼啊!

原因是,你輸入命令 npm run dev 的時候,會默認打包src文件夾下的index.js文件,打包完成后是main.js文件(放在dist),你有沒有發現我們一開始安裝webpack的時候并沒有這個文件生成,所以更別提什么index.js文件了,所以這些我們需要手動創建

我們先創建src文件.還有一個dist文件,存放默認的打包生成的文件, 然后在src里再創建index.js文件

?

9.接下來,輸入命令 webpack-demo,有些人奇怪,版本號怎么變了成4.14.0了,不好意思,我中途更新了,但是不要緊.?

然后看項目

這個main.js文件就是執行npm run dev 后,默認把我們創建的index.js打包成了main.js,然后放在dist文件夾里了

我們看一下main.js文件,很多都是打包后給生成的代碼.

然后去末尾看一下我們寫的index.js被被放進去沒有,從下圖的代碼可以看到已經包含進去了,說明我們打包成功了,為什么要做這一步呢,那當然是測試到底能不能進行打包了.

?

10.到這一步了,打包demo.js(不是默認的文件的時候), 黃色警告還是出現!那么應該怎么解決呢?那就是webpack的版本問題,命令不同了

應該使用如下命令進行打包:

?npx webpack ./demo.js -o demo.bundle.js --mode development

很神奇吧? 黃色警告沒有了!!

查看項目,可以看到已經正確打包了:

查看文件內容:

我們的代碼,已經被打包在末尾:

這樣,我們簡單的配置就已經完成了!

然后我們嘗試用一下已經打包好的文件,新建hello.html

可以看到已經成功打包了!!

如果你在學習webpack的時候,出現各種問題,更多時候是因為版本的問題,并不是你的問題, 不要灰心. webpack 4語法相對來說比較嚴格了,根據版本去尋找解決問題的方法才更容易快速地解決問題.不過上述寫的東西只是webpack的冰山一角...........

webpack的一些相關命令

??如果我們更改我們寫的代碼的時候,就需要重新進行打包,那就是更改一次又手動進行打包一次,那是很麻煩的,所以我們可以使用如下命令監聽這個事件,源文件一更新,就會進行自動打包.一開始watch時關閉地,我需要將它打開.

npx webpack --mode development --watch

?注意: 這個命令只是單純監聽了默認的打包路徑,也就是能監聽到src下index.js的變化,也能夠隨將變化時進行保存刷新后其自動打包,但是,并不能監聽到demo.js.??還有就是你的執行這個命令的時候,它必需屬于一直監聽的狀態, 如果被停止了,那監聽狀態也停止.

?

————————————————
版權聲明：本文為CSDN博主「LPLIFE」的原創文章
原文鏈接：https://blog.csdn.net/LPLIFE/article/details/80875815

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的简单地使用webpack进行打包，一些常见打包错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。