简单地使用webpack进行打包，一些常见打包错误
本質上，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 moduleswebpack 命令執行后，會默認載入當前目錄的 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进行打包，一些常见打包错误的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大力出奇迹！6144块TPU，5400亿
- 下一篇： Maven父子结构的项目依赖使用以及打包