手把手教你打包代碼----webpack

webpack基本概念

webpack本質是, node的一個第三方模塊包, 用于打包代碼;

現代 javascript 應用程式的 靜態模塊打包器 (module bundler)

webpack能做什么

功能:
1.壓縮,合并,打包
2. 語法轉換

• 高版本===>低版本(降級兼容)
• less/sass -> css

3. 監聽代碼變化,自動打包和更新
4. 提取vue中的html/.css/js檔案

作用:

1.減少檔案數量;

2.縮減代碼體積;

3.提高瀏覽器打開的速度;

新建webpack的步驟:

1.初始化--package.json

yarn init

2.下載webpack等模塊包

    yarn add webpack webpack-cli -D

3.在package.json自定義命令,為打包做準備

      scripts: {
    "build": "webpack"
}

4.新建目錄src,在src檔案夾下建立index.js檔案---該檔案為,默認入口 ./src/index.js

5.新建業務檔案,并定義執行函式(js代碼)---src/add/add.js
6.在src/index.js中匯入業務檔案
7.運行打包代碼

  yarn build
#或者 npm run build

打包后會自動生成dist檔案夾 ----默認出口: ./dist/main.js
8.打開默認生成的dist和main.js檔案,查看其中代碼

webpack 更新打包

以后代碼變更, 如何重新打包呢?

別擔心,只需要輸入打包指令重新打包就好啦~

yarn build

webpack的配置

webpack-入口和出口

默認入口: ./src/index.js

entry: "./src/main.js",

默認出口: ./dist/main.js

output: { 
        path: path.join(__dirname, "dist"), // 出口路徑
        filename: "bundle.js" // 出口檔案名
    }

修改package.json, 自定義打包命令 - 讓webpack使用組態檔

"scripts": {
    "build": "webpack"
},

webpack默認只能處理js型別檔案,無法識別html檔案---因此,我們需要借助工具來解決引入HTML

插件的使用----自動生成html檔案

目標: html-webpack-plugin插件, 讓webpack打包后生成html檔案并自動引入打包后的js

1.下載插件

yarn add html-webpack-plugin  -D

2.webpack.config.js配置

// 引入自動生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代碼
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此為基準生成打包后html檔案
        })
    ]
}

加載器的使用

css加載器

安裝

yarn add style-loader css-loader -D

webpack.config.js 配置

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

module.exports = {
    // ...其他代碼
    module: { // 加載器
        rules: [ // loader的規則
          {
            test: /\.css$/, // 匹配所有的css檔案
            // use陣列里從右向左運行
            // 先用 css-loader 讓webpack能夠識別 css 檔案的內容并打包
            // 再用 style-loader 將樣式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

把css檔案引入到 main.js

import "./css/index.css"

less加載器

目標: less-loader讓webpack處理less檔案, less模塊翻譯less代碼

下載包

yarn add less less-loader -D

webpack.config.js配置

 rules: [ // loader的規則
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 讓webpack處理less檔案, 內置還會用less翻譯less代碼成css內容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]

把less引入到main.js中

import "./less/index.less"

圖片檔案 加載器

目標: 用asset module方式(webpack5版本新增)

下載包

yarn add url-loader file-loader -D

webpack.config.js 配置

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

在src/main.js - 把圖片插入到創建的img標簽上

// 引入圖片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

總結: url-loader 把檔案轉base64 打包進js中, 會有30%的增大, file-loader 把檔案直接復制輸出

字體檔案加載器

配置

{ // webpack5默認內部不認識這些檔案, 所以當做靜態資源直接輸出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: { //生成檔案名定義規則(自定義檔案名)
    	filename: 'font/[name].[hash:6][ext]'
    }
}

在main.js引入iconfont.css

// 引入字體圖示檔案
import './assets/fonts/iconfont.css'

總結: url-loader和file-loader 可以打包靜態資源檔案

js語法轉換

安裝包

yarn add -D babel-loader @babel/core @babel/preset-env

配置規則

rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 預設:轉碼規則(用bable開發環境本來預設的)
            }
        }
    }
  ]

總結: babel-loader 可以讓webpack 對高版本js語法做降級處理后打包

webpack 開發服務器

每次修改代碼, 都需要重新 yarn build 打包, 才能看到最新的效果, 實際作業中, 打包 yarn build 非常費時，我們可以啟動本地服務, 可實時更新修改的代碼, 打包變化代碼到記憶體中, 然后直接提供埠和網頁訪問，

下載包

yarn add webpack-dev-server -D

配置自定義命令

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

如果想設定特定的埠號，可以在webpack.config.js中添加服務器配置（webpack-dev-server配置 ）

webpack-dev-server配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000 // 埠號
    }
}

運行命令-啟動webpack開發服務器

yarn serve
#或者 npm run serve