webPack -- 安裝、使用、打包 · 前端知識 -- 學習整理

[TOC] >[success] # webpack 安裝 ~~~ 1. 第一種全局運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 2.第二種在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中開發環境中 ~~~ * 在webpack4中還需安裝下面這個 ~~~ 1.npm i webpack-cli -g 如果 webpack 安裝在全局，那么 CLI 也需要裝在全局 2.npm i webpack-cli --save-dev 安裝在開發環境 ~~~ >[danger] ##### 結構目錄說明 ~~~ 1.dist 是指編譯后的文件，可以理解為壓縮發布版 2.src 源碼文件，適合動手能力強的童鞋 3.docs 文檔 4.examples 示例文件 5.test 測試腳本 6..gitignore 告訴git哪些文件不要上傳到 GitHub，比如數據庫配置文件等 7.LICENSE.txt 授權協議 8.README.md 自述文件，整個項目的簡介、使用方法等 9.bower.json Bower 包管理器配置文件 10.package.json npm 包管理器配置文件 11.webpack.config.js webpack配置文件 ~~~ >[success] # 使用案例 -- 奇偶行變色 ![](https://box.kancloud.cn/732f16f110248d8cb04458c5919e72c6_344x206.png) * 結構目錄 ~~~ . ├── dist // 打包后的文件 ├── src // 源碼文件 | ├── css | └── js | └── index.html | └── main.js // 這是 main.js 是我們項目的JS入口文件 └── package.json // npm init 生成的NPM包的所有相關信息，其中sprict可以腳本 ~~~ >[danger] ##### 步驟 ~~~ 1.創建一個上面的結構目錄 2.nmp init 生成一個package.json 配置文件 3.安裝webpack兩種方式任選:npm i webpack -g全局安裝/npm i webpack --save-dev安裝開發環境中 4.如果使用的是webpack4 還需要安裝:npm i webpack-cli -g 5.webpack ./src/main.js ./dist/bundle.js 第一路徑是要被打包文件的路徑，第二個是打包位置，這個方法支持 webpack3 6.webpack ./src/main.js -o ./dist/bundle.js 支持webpack4 ~~~ * main.js ~~~ 1.直接在html中引入下面編寫的main,js的內容就會報錯想解決報錯的話，就使用 webpack打包。 2.webpack ./src/main.js ./dist/bundle.js 第一路徑是要被打包文件的路徑，第二個是打包位置，這個方法支持 webpack3 3.webpack ./src/main.js -o ./dist/bundle.js 支持webpack4 ~~~ * 打包后的效果 ![](https://box.kancloud.cn/01439ebc91fd9635dcc97bd4026b8ead_635x229.png) ~~~ // 這是 main.js 是我們項目的JS入口文件 // 1. 導入 Jquery // import *** from *** 是ES6中導入模塊的方式 // 由于 ES6的代碼，太高級了，瀏覽器解析不了，所以，這一行執行會報錯 // 需要解釋中的第二條進行打包，為什么會報錯參考上一篇困惑（主要是瀏覽器支持import方式） import $ from 'jquery' $(function () { $('li:odd').css('backgroundColor', 'yellow'); $('li:even').css('backgroundColor', function () { return '#' + 'D97634' }) }); ~~~ * index.html 內容 ~~~ 1.注意：不推薦直接在這里引用任何包和任何CSS文件 2.當我們直接引入main.js 的時候發現瀏覽器報錯，可以參考上一篇文章，由于瀏覽器不支持import導入導致的 3.解決問題二，就給通過 webpack 這么一個前端構建工具，把 main.js 做了一下處理，在dist目錄生成了一個 bundle.js 的文件，具體參考main.js解釋中的第二條 4.這時候直接使用webpack 在dist生成的js 即可<script src="../dist/bundle.js"></script> 5. 當使用 html-webpack-plugin 之后，我們不再需要手動處理 bundle.js 的引用路徑了，因為這個插件，已經幫我們自動創建了一個合適的 script , 并且，引用了正確的路徑 6.css 或發起二次請求，不推薦這么搞 :<link rel="stylesheet" href="./css/index.css"> ~~~ * 直接使用import 報錯 ![](https://box.kancloud.cn/463923d68ea93ac279b461556b5d79f2_420x33.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>   </head> <body> <ul> <li>第一</li> <li>第二</li> <li>第三</li> <li>第四</li> </ul> </body> </html> ~~~ >[danger] ##### 總結 ~~~ 經過剛才的演示，Webpack 可以做的事 1. webpack 能夠處理 JS 文件的互相依賴關系；這樣只需要一個main.js 2. webpack 能夠處理JS的兼容問題，把高級的、瀏覽器不是別的語法，轉為低級的，瀏覽器能正常識別的語法，例如import 導入這個es6語法在瀏覽器中也可以使用。 3.可能有些文章提到'babelrc',但這里沒有使用'babelrc' 也把import 轉換成低級瀏覽器的語法的原因是，webpack 是可以處理部分es6 語法從高級到低級 ~~~