一.你需要準備什麼?
- webpack v4.41.5
- Node 12.14.0 LTS
- 開發工具:webStorm
webpack 用於編譯 JavaScript 模塊。一旦完成安裝，你就可以通過 webpack 的 CLI 或 API 與其配合交互。如果你還不熟悉 webpack，請閱讀webpack4.x - 初始webpack，瞭解爲什麼你要使用 webpack，而不是社區中的其他工具。
二.基本安裝
首先我們創建一個目錄，
如果大家剛裝完node發現npm命令在webStorm的Terminal窗口無法使用,可以嘗試重啓開發工具或者電腦;
初始化 npm
npm init -y
npm install --save-dev webpack
接着安裝 webpack-cli（此工具用於在命令行中運行 webpack）;
截止目前,我們就完成了webpack的本地安裝,我們來看看我們的項目接口;
我們發現了3個不是我們創建的目錄/文件,其中package.json是我們初始化npm是自動生成,另外兩個使我們本地安裝webpack時自動生成;
三.打包js文件
接下來,我們隨着一個小案例,來學習如何使用webpack打包js文件;
爲了實現上面的效果,我們藉助jquery庫來實現;
3.1 代碼之風
首先我們修改下我們的相關代碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不推薦直接在這裏引用任何包和任何css文件,引用我們項目的js-->
<script src="main.js"></script>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
</ul>
</body>
</html>
main.js
//這是main.js 是我們項目的JS入口文件
//1導入Jquery
//import *** from *** 是es6中導入模塊的方式
import $ from 'jquery'
$(function () {
//偶
$("li:odd").css('backgroundColor', 'lightblue');
//奇
$("li:even").css('backgroundColor', 'red');
});
我們發現import $ from 'jquery'報紅,因爲我們還沒有引入jquery庫;
安裝jquery庫
默認安裝在項目路徑的node_modules下
然後我們需要設置開發工具支持es6語法,就會發現報紅自動消失;
3.2 運行
運行我們的index.html發現如上報錯;
ES2015 中的 import 和 export 語句已經被標準化。雖然大多數瀏覽器還無法支持它們，但是 webpack 卻能夠提供開箱即用般的支持。
事實上，webpack 在幕後會將代碼“轉譯”，以便舊版本瀏覽器可以執行。如果你檢查 dist/bundle.js，你可以看到 webpack 具體如何實現，這是獨創精巧的設計！除了 import 和 export，webpack 還能夠很好地支持多種其他模塊語法，更多信息請查看模塊 API。
注意，webpack 不會更改代碼中除 import 和 export 語句以外的部分。
3.3 再出發
關於上面的問題,webpack給我們提供瞭解決方案;
在 webpack 4 中，可以無須任何配置使用，然而大多數項目會需要很複雜的設置，這就是爲什麼 webpack 仍然要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多，所以讓我們創建一個取代以上使用 CLI 選項方式的配置文件;
創建webpack.config.js文件
/**
* Created by Milogenius on 2020/1/5.
*/
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
}
}
module.exports = config
接下來打開 package.json 文件，來編寫一條命令執行webpack的打包。在 script 中添加：
"build": "webpack --config webpack.config.js --progress --colors"
然後就可以在命令行執行：npm run build，執行完畢後，我們可以看到，在根目錄下多了一個 dist 文件夾 並有一個 bundle.js文件，這就是webpack爲我們打包出來的靜態資源，而文件路徑就是我們在 output 中設置的值。
最後,在index.html引入bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不推薦直接在這裏引用任何包和任何css文件-->
<script src="../dist/bundle.js"></script>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
</ul>
</body>
</html>
我們用瀏覽器打開index.html,發現顯示正常;這樣我們利用webpack提供的相關技術,解決上面語法不適用問題;
四.總結
webpack4.0的安裝和其他版本有所不同,命令有所不同,大家在學習之前,需要看清相關環境;
