webpack系列學習01——hello webpack

自從換新工做後，天天10點上班，6點多下班，20多歲過起了養老的生活。通過一個多月的自我掙扎，終於開始決定天天回家後不能再頹廢了。定個目標，每週至少三篇原創博客。自行監督，若是作不到，（再說）。
就先從webpack下手吧。先說一句，強烈建議看官方文檔，這個webpack也有中文版的，並且也不是很難懂，照着敲一邊基本上就懂了，我就是這麼學的。
官網傳送門：webpack中文網
若是你不想看官網，fine，跟着這個系列學吧，也不會讓你失望的，我拿湖人今年的總冠軍獎盃保證。
本系列教程代碼同步更新至github，歡迎圍觀和star。
github傳送門：https://github.com/JerryYuanJ/webpack-learn
廢話很少說，開始吧。

新建項目

建立一個文件夾 01-hello-webpack，而後在根目錄下輸入命令，npm init 開始項目的初始化。你能夠根據提示一步步的填寫，最後他會在根目錄下根據你的填寫內容自動給你生成package.json文件，若是你嫌麻煩，能夠直接在 npm init 後面添加參數-y 表示遵循默認配置：

npm init -y

我生成的package.json文件如圖：

{
  "name": "01-hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
  "author": "Jerry",
  "license": "ISC" }

安裝webpack

很簡單，在項目根目錄下輸入命令：

npm install webpack --save-dev

提示：install能夠簡寫成 i , --save-dev 能夠簡寫成 -D (大寫)，因此以上命令也能夠寫成

npm i webpack -D

這時你的package.json中會多出這些：

"devDependencies": {
    "webpack": "^4.16.2"
}

表示咱們已經成功安裝了版本爲4.16.2的webpack了，可是要注意，webpack4之後命令行工具再也不集成在webpack包裏面了，須要再運行一個安裝命令行工具(webpack-cli)的命令，咱們能夠試試上面的簡寫：

npm i webpack-cli -D

安裝結束後它也會出如今devDependencies裏面，和webpack相依爲命。

提示1：若是下載速度慢，請換成cnpm淘寶鏡像。
提示2：最好不要全局安裝，除非你很自信。

hello webpack

首先呢，咱們在項目根目錄下新建兩個文件夾，一個src用於存放咱們的源碼，一個dist用來存放打包後的代碼。而後在dist文件夾中新建一個空的hello.html 文件，在裏面引入這樣的js腳本：（這裏的hello.js名字是隨便取的，不過要和執行打包命令的時候保持一致）

<script src="hello.js"> </script>

如圖：

接着咱們在src中新建一個hello.js文件，裏面簡單寫一點東西：

document.writeln(`
    <h1>hello webpack</h1>
`)

往頁面上打印hello webpack，符合本文主旨，點名主題。
至此，整個項目的結構是這樣子的，很簡單。

準備工做完畢，接下來能夠幹正事了。
慢着，我還要給你介紹一個命令：npx，簡單瞭解一下，它是node v8.2+版本之後出來的，它能夠臨時安裝可依賴程序，用完自動刪，不用擔憂全局污染；他能夠執行依賴包中的命令；他能夠自動加載node_modules中的依賴包，不用指定路徑等等等等….這裏只是稍微提一下，具體好處有哪些，你能夠本身百度。
這裏咱們能夠用npx在根目錄下來執行咱們的webpack命令，

npx webpack ./src/hello.js -o ./dist/hello.js

這段話表示，webpack會使用src目錄中的hello.js爲入口來打包，把打包後的js文件輸出到dist目錄中而且也命名爲hello.js。這裏的打包後的名稱，要與以前在hello.html中引入的script腳本的名稱要一致。命令運行完之後會在dist目錄下多出一個hello.js文件。如圖：

打包後的文件，是通過webpack壓縮優化處理的，不用管它。咱們能夠在裏面看到咱們源代碼中寫的hello.js中的代碼：

這時候運行hello.html你能夠發現，hello.js中的代碼正常運行：

若是你不想用npx，也能夠直接使用node_modules中webpack命令：

./node_modules/.bin/webpack src/hello.js -o dist/hello.js

window上若是要使用路徑的方式調用webpack命令的話，須要反斜線：

.\node_modules\.bin\webpack src/hello.js -o dist/hello.js

效果應該是同樣的。若是不同，你就錯了。
至此，webpack的初體驗就結束了。這個例子沒有體現出webpack做爲一個模塊打包機的功能，因此，你本身練習的時候，能夠在hello.js中import其餘的模塊，好比jquery，lodash或者本身定義的js等，而後在代碼中使用這些模塊的一些功能或者變量，看看webpack是否是也能打包，打包後的js是否是能夠運行。這裏我就再也不舉例子了，否則上面的都要重寫了。

使用配置文件

快結束了，再忍忍。
相比你敲了上面的命令後會有這樣的想法，在命令行輸入參數多不方便，我萬一輸錯了改的話也十分麻煩，並且實際項目中的配置可能不少，若是都要在命令行輸，那我不幹了。
ok，webpack提供了配置功能的，並且能夠結合npm腳本更加方便的使用。
首先咱們在項目根目錄下新建一個配置文件webpack.config.js，輸入如下內容：

const path = require('path')

module.exports = {
    entry: './src/hello.js',
    output: {
        filename: 'hello.js',
        path: path.resolve(__dirname, 'dist')
    }
}

我相信你能猜出來什麼用了，就很少廢話了。至於path是什麼，path.resolve是幹什麼的，你能夠去查閱node的基本用法。簡單說一下，path是node中的一個模塊，path.resolve是把相對路徑轉化成絕對路徑的，__dirname 表示當前執行腳本所在的目錄（你能夠本身打印出來看看）
接下來，你要刪除掉dist中原來打包好的hello.js文件，而後在根目錄下輸入以下命令進行打包：

npx webpack --config webpack.config.js

效果應該是如出一轍的，運行結果也是沒變。
提示：webpack.config.js 是默認的webpack配置文件名，即若是你上面的命令只輸入npx webpack 也是ok的。這裏加config參數只是說明，webpack能夠支持任何名稱的配置文件，十分靈活。

添加npm script

在package.json中添加一個運行腳本：

"build": "webpack"

爲何只寫webpack不用再說了吧。
這時候，在命令行運行 npm run build 便可達到同樣的效果了。使用npm的scripts，就跟使用npx同樣，能夠經過模塊名引用本地安裝的 npm 包，很是方便。
最後看一下是否是對的吧。

Ok

代碼已上傳至github，若是本文對你有幫助，請在github上給個star，謝謝。
github傳送門：https://github.com/JerryYuanJ/webpack-learn