從零教你使用webpack，從此專案打包不用愁

webpack

• 問題
  檔案依賴關系錯綜復雜
  靜態檔案請求效率低
  模塊化支持不友好
  瀏覽器對高級JS特性兼容性不好

安裝和配置

--save-dev 也可以寫作 -D，表示是開發依賴（開發階段需要用到的包，專案上線運行后不需要）

初始化專案 npm init -y

跟目錄下新建 src 目錄，作為代碼檔案目錄

src 下新建 index.html和index.js

index.html 中撰寫 html 代碼

安裝 jquerynpm i jquery

安裝 webpack
通過命令npm install webpack webpack-cli --save-dev來進行安裝

webpack 配置
根目錄下新建 webpack.config.js

module.exports={
    mode:'development' // 開發模式
}

配置啟動命令
打開 package.json ，在 scripts 屬性中加入如下代碼

"dev":"webpack"

打包
終端運行如下命令
npm run dev
成功后會在跟目錄創建 dist 目錄，并生成一個 main.js 檔案
運行
在 index.html 中，引入 main.js，再次運行 index.html 即可成功

打包入口檔案和出口檔案

• 入口檔案

就是專案或程式被請求的時候，第一個被訪問到的檔案，此檔案再找相對應的模塊進行處理

在當前專案中，index.html 是入口檔案，因為我們請求的就是 index.html

但是對于 webpack 來說，打包的入口檔案是 index.js，因為 index.js 中引入了其他程式需要的模塊，并撰寫了相應的邏輯代碼

• 出口檔案

打包之后的檔案目錄以及名稱

webpack 有一些默認配置

入口檔案：src/index.js
出口檔案：/dist/main.js
重新配置入口檔案和出口檔案

const path=require('path')
module.exports={
    mode:'development', // 開發模式
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"bundle.js"
    }
}

運行 npm run dev 命令查看結果

根目錄下會自動創建一個dist檔案中，里面生成bundle.js檔案

自動打包

安裝
npm install --save-dev webpack-dev-server

修改 pacjkage.json 中的啟動命令
"dev":"webpack serve --open"

或者使用(–open 是自動打開瀏覽器，可以不加)
"dev":"webpack serve"

運行
npm run dev

打開地址為：http://localhost:8080/

原index.html中引入js檔案為下圖：

運行后在http://localhost:8080/不需要做任何更改，瀏覽器會根據內容做更改的

生成預覽頁面

當前存在的問題：localhost:8080 對應的是網站跟目錄，index.html 在 src 目錄下，訪問起來比較麻煩

解決方案：可以將 src 目錄下的 index.html 拷貝一份到根目錄下，這樣訪問 localhost:8080 時，就會默認渲染 index.html

但是如果修改完 index.html 后還需要手動拷貝比較麻煩，可以使用插件：HtmlWebpackPlugin

安裝
npm install --save-dev html-webpack-plugin

安裝完成后在webpack.config.js 中撰寫如下代碼

重新運行npm run dev后會報如下錯誤
報此錯誤是我們缺少loader-utils依賴

執行如下代碼則可以解決以上報錯問題

npm install loader-utils -D

再次重新運行 npm run dev后

訪問：http://localhost:8080/，就會運行index.html

但是跟目錄下并沒有 index.html ，因為其仍然創建在記憶體中

但是你會發現有一個自己引入的js檔案（無效了），系統會自動將根目錄下的bundle.js檔案給你引入進來

加載器

webpack 默認只能打包 .js 模檔案，其他靜態檔案，如 .css，圖片等默認不能處理，如果不加載對應的加載器，則會報錯

webpack 支持使用 loader對檔案進行預處理，你可以構建包括 JavaScript 在內的任何靜態資源，并且可以使用 Node.js 輕松撰寫自己的 loade

下面的圖說明了webpak如何處理各種檔案型別

處理css檔案

src 目錄下新建 css 目錄，新建 index.css

撰寫樣式

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

li {
    line-height: 45px;
}

但是在打包時會報如下錯誤

由此可見，沒有對應的 loader，webpack 打包時無法處理 css 檔案

安裝處理css樣式對應的 loader

npm install --save-dev css-loader style-loader

配置 webpack.config.js

配置完以后重新運行 npm run dev即可

注意：

這兩個不可反寫（loader 的呼叫是從后往前掉）

處理less檔案

安裝

npm install less-loader less -D

rules 中增加一條

css 目錄中新建 inde.less

body {
    background-color: #ccc;

    ul {
        list-style-type: none;

        li {
            line-height: 35px;
        }
    }

}

我們的vscode中可能添加了某些使less檔案自動轉換為css檔案的插件，可以取關掉它，效果更佳

index.js中引入inde.less

重新運行 npm run dev

圖片處理

安裝
npm i url-loader url-loader -D

配置 webpack.config.js

{
    test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 614400 // 代碼中使用的圖片為500k
        }
    }]
}

在src中新建檔案夾images中放入一張圖片
將此圖片給body設定為背景
配置完一定要重新運行npm run dev
如果圖片大于我們設定的大小，回傳的則是資源檔案
如果圖片小于我們設定的大小，回傳的則是base64 編碼

關于圖片的 base64 編碼

圖片的 base64 編碼就是可以將一副圖片資料編碼成一串字串，使用該字串代替影像地址
.
這樣做有什么意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的（所有才有了 csssprites技術的應運而生，但是 csssprites 有自身的局限性，下文會提到）
.
沒錯，不管如何，圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，而可以隨著 HTML的下載同時下載到本地那就太好了，而 base64 正好能解決這個問題

處理高級js語法

babel 用于將js的新語法和特性轉換為瀏覽器支持的語法

安裝babel轉換器相關包

npm install -D babel-loader @babel/core @babel/preset-env

webpack.config.js 中添加如下規則

{
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
        presets: ['@babel/preset-env']
        }
    }
}

在 index.js 中撰寫如下代碼

class Person {
    static age = 20
}
console.log(Person.age);

重新運行npm run dev進行打包

會報如下錯誤

錯誤原因在于沒有安裝babel 語法的相關插件

安裝
npm i -D @babel/plugin-proposal-class-properties

然后在上面規則的 option 屬性中添加配置

options: {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}

再次重新運行npm run dev進行打包就可以了