一小時上手webpack（基礎使用指南含demo）

1、什麼是webpack

官方定義：

webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.

簡單的說webpack是一個構建工具，什麼是構建工具呢，咱們在開發環境的代碼，是爲了方便閱讀與開發，生產環境的代碼則是爲了代碼更好的運行。開發環境的代碼，要進行壓縮編譯之後，才能放在線上執行，這樣代碼體積更小，加載起來更快，因此構建工具通常有如下幾種做用：

一、代碼壓縮

將JS、CSS代碼混淆壓縮，讓代碼體積更小，加載更快

二、編譯語法

編寫CSS時使用Less、Sass，編寫JS時使用ES六、TypeScript等，這些標準目前都沒法被瀏覽器兼容，所以須要構建工具編譯，例如使用Babel編譯ES6語法。

三、處理模塊化：

CSS和JS的模塊化語法，目前都沒法被瀏覽器兼容。所以開發環境可使用既定的模塊化語法，可是須要構建工具將模塊化語法編譯爲瀏覽器可識別形式。例如使用webpack、Rollup等處理JS模塊化。

2、why webpack

模塊化

以前寫過一篇關於模塊化的文章，不論是AMD仍是CMD，都是runtime的時候進行的，且瀏覽器的支持性還不是特別好，須要一個東西來進行轉化。

loader

一個web不止有js，還有css和各類靜態資源，webpack提供了各類loader來處理css和less、sass。

轉載一個關於webpack誕生的故事：

2012年，一個叫作Tobias的，在Newberg(美國一個城市)讀master的德國人要寫一片學位論文。他以前是寫c#的，歷來沒有寫過一個web界面。他在一些特定的場景須要用到Google Web Toolkit中的一個叫作code splitting的功能。而在他的論文中他須要寫一個web app，他就想找一個包含這個功能的庫來用。他找到的這個庫叫webmake，這也是一個bundler。可是卻沒有code splitting這個功能，因而他提了一個issue，而且寫了一堆如何實現這個功能的代碼，但願維護者可以加入這個功能。在一番討論事後維護者拒絕了他，因而在通過贊成以後，他把這個庫fork到了了過去並本身加上了這個功能，給新的庫取名爲webpack。

2014年，Dan Abramov在Stack Overflow上提了一個關於hot module replacement的問題，Tobias用很大的篇幅給他介紹了這個還在開發的功能，詳細解釋了這個功能怎麼在webpack裏工做的，以及這個功能有多棒，你能夠不用刷新瀏覽器了！

2015年，這時在Instagram工做的Pete Hunt經過一次演講告訴了世界他們是如何使用webpack打包發佈他們的react app的。而後你懂得，webpack就火了。像Facebook這樣的公司也開始使用webpack了。可是其實Tobias只是每週大概花5 6個小時在webpack中。

是的，在這兩個討論中，webpack完全火了，走向了世界。

3、搭建環境

建立項目

建立一個項目目錄並生成 package.json。npm 使用它來管理項目依賴項。如下是基本命令：

mkdir webpack-demo

cd webpack-demo npm init -y
複製代碼

安裝 Webpack

npm install webpack webpack-cli --save-dev
複製代碼

運行webpack

在src目錄下新建一個index.js

console.log(111)
複製代碼

執行命令：

webpack
複製代碼

自動會生成一個dist文件夾，main.js裏面會生成一個

console.log(111)
複製代碼

4、配置 html-webpack-plugin

能夠藉助html-webpack-plugin來新建一個HTML文件在瀏覽器看效果

npm install html-webpack-plugin --save-dev
複製代碼

新建一個webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    })
  ]
}
複製代碼

修改index.js

document.write('你好世界!!!')
複製代碼

執行命令：webpack，會看到dist文件下會多出來一個index.html，在瀏覽器打開index.html就出現熟悉的頁面了

5、配置webpack-dev-server

WDS 是在內存中運行的開發服務器，這意味着打包內容不會寫入文件而是存儲在內存中。這一區別在調試代碼和樣式時很是重要。

默認狀況下，WDS 會在您開發應用程序時自動在瀏覽器中刷新內容，所以您無需親自執行此操做。但它也支持高級 Webpack 功能——熱模塊更換（HMR）。

安裝

npm install webpack-dev-server --save-dev
複製代碼

配置

咱們須要用npm script來啓動他，按照npm的約定，咱們定義一個命令，在package.json文件裏面：

"scripts": {
  "start": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},
複製代碼

這確定是很是眼熟了，咱們在使用vue-cli的時候必定會有相似的命令

啓動

正常狀況下，輸入命令npm start或者npm run start就能夠啓動項目了

可是通常狀況下都會報這個錯，由於webpack和WDS對於版本的兼容性要求很高，這一點也很是的噁心

個人解決方案是在package.json文件裏面：

"webpack": "^4.17.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
複製代碼

而後從新npm install，再次啓動項目就行了

若是你嘗試修改代碼，你應該會在終端裏看到一些輸出信息。瀏覽器也會根據變更作一些強制更新。

基礎配置 WDS

webpack.config.js

devServer: {
    // 僅顯示錯誤級別的輸出,從而減小輸出信息
    stats: "errors-only",

    // 從環境變量中傳入 host 和 port,從而達到可配置
    //
    // 若是你使用 Docker, Vagrant 或者 Cloud9, 那麼把
    // host 設置爲 "0.0.0.0";
    //
    // 0.0.0.0 對於全部的網絡設備都是可用的
    // 而默認的 `localhost` 不行.
    host: process.env.HOST, // 默認爲 `localhost`
    port: process.env.PORT, // 默認爲 8080
    open: true, // 在瀏覽器中打開
},
複製代碼

經過網絡訪問開發服務器

webpack.config.js

host: '0.0.0.0',
複製代碼

package.json

"start": "webpack-dev-server --host 0.0.0.0 --mode development",
複製代碼

此時啓動之後就能夠用過本機IP地址訪問本地服務了

修改配置文件熱更新

當打包文件發生變化時，開發服務器會自動重啓；可是，當 Webpack 配置變化了呢？若是說，每次配置變更你就要手動重啓開發服務器，沒過一下子，你就會厭煩不堪了。如 GitHub 中所討論的那樣，咱們可使用 nodemon 監視工具自動執行該過程。

安裝nodemon

npm install nodemon --save-dev
複製代碼

package.json

"start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",
複製代碼

輪詢而不是監測文件

這個選項適合有時候熱更新無論用了，能夠試一下這個選項，基本都能解決

devServer: {
    watchOptions: {
      // 首次更改後延遲多少時間再從新構建
      aggregateTimeout: 300,

      // 輪詢的時間間隔 (單位 ms, 接受 Boolean 類型的值)
      poll: 1000,
    },
},
複製代碼

6、Webpack Dev Middleware

webpack-dev-middleware是一個包裝程序，它將經過webpack處理的文件發送到服務器。它在webpack-dev-server內部使用，可是若是須要，它能夠做爲單獨的軟件包使用，以容許進行更多自定義設置。咱們將看一個webpack-dev-middleware與Express服務器結合的示例。

安裝

npm install --save-dev express webpack-dev-middleware
複製代碼

webpack.config.js的output新增一個輸出地址

module.exports = {
  devServer: {
    // 僅顯示錯誤級別的輸出,從而減小輸出信息
    stats: "errors-only",

    // 從環境變量中傳入 host 和 port,從而達到可配置
    //
    // 若是你使用 Docker, Vagrant 或者 Cloud9, 那麼把
    // host 設置爲 "0.0.0.0";
    //
    // 0.0.0.0 對於全部的網絡設備都是可用的
    // 而默認的 `localhost` 不行.
    host: '0.0.0.0', // 默認爲 `localhost`
    port: process.env.PORT, // 默認爲 8080
    useLocalIp: true,
    open: false, // 在瀏覽器中打開
    watchOptions: {
        // 首次更改後延遲多少時間再從新構建
        aggregateTimeout: 300,

        // 輪詢的時間間隔 (單位 ms, 接受 Boolean 類型的值)
        poll: 1000,
    },
  },
  output: {
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    })
  ]
}
複製代碼

新建一個server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
複製代碼

package.json加一個命令

"scripts": {
    "start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",
    "build": "webpack --mode production",
    "server": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  
複製代碼

運行

npm run server
複製代碼

在localhost:3000就能夠看到輸出的服務了

記在最後

webpack內容很是多，接下來還會繼續記錄loader和分包加載以及各類插件