webpack的基本使用
webpack的安裝
- webpack的使用時需要借助 node 的環境的
- 在 node 中自動下載了 npm 這個包管理工具，之后的操作我們需要使用npm包管理工具進行相關操作
- 我們需要打開終端（cmd）或者編譯器中的終端（我使用的vs code編譯器，使用
ctrl + shift + ~打開終端） - 輸入
npm install webpack -g即可在全域下載 webpack,-g表示全域安裝， - 下載好之后在終端輸入
webpack -version即可查看webpack的版本，如果出現版本資訊，則表示安裝成功
注意：webpack的版本的不同在后續的操作中會存在些許差異，我這里下載的是 wepack4.x版本的，下面的講述中我會將webpack3.x版本和4.x版本的些許差別講一下 - 如果是webpack是4.x版本的話，除了全域安裝 webpack 之外還需要全域安裝一下 webpack-cli 這樣后續有些問題才能進行，安裝步驟如上述第四步類似
webpack的基本用法
- 假設我的目錄中是這樣的：src檔案夾下存在入口檔案main.js和js檔案夾，js檔案夾中還有一個aaa.js檔案，各個檔案的代碼如下
- aaa.js
function add(num1 , num2) {
return num1 + num2;
}
function mul(num1 , num2) {
return num1 * num2;
}
export {add,mul}; // ES6匯出模塊
- main.js
import {add,mul} from './js/aaa.js' // ES6的語法匯入模塊
console.log(add(20,30));
console.log(mul(20,30));
- 了解到上述的依賴關系之后，我們便需要打包檔案了，注意：webpack打包后是要在服務器上訪問才能有效，不然瀏覽器會報錯
- 確認代碼中的依賴關系沒錯之后，在終端輸入
- webpack3.x版本：
webpack .\src\main.js .\dist\bundle.js - webpack4.x版本：
webpack .\src\main.js -o .\dist\bundle.js --mode=development
上面的代碼意思為：通過webpack將.\src\main.js該目錄下的main.js檔案打包到 dist檔案夾下的，命名為bundle.js
- webpack3.x版本：
- 如果將來修改了代碼之后，則必須重新打包一遍，即：再執行一次第三步
- 這個時候可能就會覺得該操作很繁瑣，于是乎我們將進一步改進代碼
- 在終端執行操作：
npm init -y初始化一個json檔案，該檔案非常有必要，之后下載包都會記錄在其中
注意：如果使用上面的方式初始化的json檔案，則package.json的name值為專案的名稱，我們不能將這里的name屬性值設定為中文，所以建議使用 npm init 的方式初始化package.json檔案，這樣的好處是可以自定義name屬性的值，不能是中文 - 在終端輸入：
npm install path --save-dev即可在開發環境下下載path的模塊（方便后面使用） - 新建一個webpack.config.js檔案，注意：這個檔案的名稱是固定的，不要自己更改，在檔案中輸入代碼：
const path = require('path'); // 匯入之前的下載好的模塊
module.exports = {
// 在組態檔中，手動指定 入口 檔案和 出口 檔案
mode:'development', // webpack4.x版本中需要加入這個屬性
entry:'./src/main.js', // 入口檔案
output:{ // 出口檔案
path:path.resolve(__dirname,'dist'), // 指定將要打包好的檔案應該要輸出到哪個地方去（注意：路徑必須是絕對地址）
filename: 'bundle.js' // 指定輸出檔案的檔案名
}
}
注意：如果在output中的path中您輸入的是 ./dist 的話會報錯，因為這里的path不允許使用相對地址，必須使用絕對地址，則需要借助 node 中的 path 模塊
9. 做完上述操作之后，即可在終端輸入：webpack打包檔案
10. 打開package.json檔案，在檔案中找到scripts的屬性，這里面表示腳本命令，我們在該物件中添加一個自定義的命令，如：屬性名為：build，屬性值為 webpack，
11. 然后我們便可以通過在終端輸入：npm run build打包檔案
注意：在終端中使用的webpack是使用的全域中的 webpack，而在 scripts 物件中使用的 webpack 會優先使用本地的，我們一般使用本地的webpack，所以，我們要使用 npm 下載本地的webpack，如果是4.x版本的webpack還需要下載 webpack-cli，代碼如下：
npm install webpack --save-dev其中 save-dev 是表示開發中依賴，即：在開發中需要使用webpack，而專案上線之后不需要使用了，在 package.json 檔案中的 devDependencies 中會顯示你下載過的開發依賴的檔案，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169439.html
標籤：JavaScript
上一篇：js基礎題