webpack 是什么

轉(zhuǎn)載請(qǐng)注明來(lái)源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack 是什么

Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。

從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。

webpack可以叫“靜態(tài)模塊打包器”。

一、webpack的初體驗(yàn)

1.1、初始化環(huán)境

> npm init

1.2、安裝 webpack

#本地目錄 安裝 webpack 及配套的 webpack-cli
> npm i webpack webpack-cli -D

#全局 安裝 webpack 及配套的 webpack-cli
> npm i webpack webpack-cli -g

#本地目錄 安裝 webpack 及指定版本3.*的 webpack-cli
> npm i webpack webpack-cli@3 -D

#當(dāng)前學(xué)習(xí)筆記所使用的版本如下
> npm i webpack@4.41.6 webpack-cle@3.3.11 -D

1.3、運(yùn)行指令

1.3.1、創(chuàng)建入口js文件

// index. js: webpack入口起點(diǎn)文件
// 路徑： ./src/index.js
function add(x, y){
    return x + y;
}
console.log(add(1, 2));

1.3.2、開發(fā)環(huán)境運(yùn)行

# 開發(fā)環(huán)境
# webpack會(huì)以./src/index.js為入口文件開始打包,打包后輸出到./build/built.js整體打包環(huán)境,是開發(fā)環(huán)境
> webpack ./src/index.js -o./build/built.js --mode=development

1.3.3、生產(chǎn)環(huán)境運(yùn)行

# 生產(chǎn)環(huán)境
# webpack會(huì)以./src/index.js為入口文件開始打包,打包后輸出到./build/built.js整體打包環(huán)境,是生產(chǎn)環(huán)境
> webpack ./src/index.js -o ./build/built.js --mode=production

結(jié)論:

1、 webpack能處理js/json資源,不能處理css/img等其他資源

2、生產(chǎn)環(huán)境和開發(fā)環(huán)境將ES6模塊化編譯成瀏覽器能識(shí)別的模塊化

3、生產(chǎn)環(huán)境比開發(fā)環(huán)境多一個(gè)壓縮js代碼

二、使用 webpack.config.js 配置執(zhí)行打包

創(chuàng)建如下初始目錄和文件

.

├── src
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   ├── logo1.png
│   ├── logo2.png
│   └── logo3.png
└── webpack.config.js

2.1、index各文件內(nèi)容

<!-- 文件路徑 ./src/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 學(xué)習(xí)</title>
</head>

<body>
    <h1 id="title">hello webpack</h1>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="./logo2.png" alt="html中引用圖片" />

</body>

</html>

/*
路徑： ./src/index.css
*/
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: Dpink;
}
#title {
  color: black;
}
#box1 {
  width: 100px;
  height: 100px;
  background-image: url('./logo1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box2 {
  width: 200px;
  height: 200px;
  background-image: url('./logo2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box3 {
  width: 300px;
  height: 300px;
  background-image: url('./logo3.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/*
index.js: webpack入口起點(diǎn)文件
路徑： ./src/index.js
*/

// 引入樣式資源
import './index.css';

function add(x, y)
{
    return x + y;
}

console.log(add(1, 2));

2.2、webpack.config.js 配置文件內(nèi)容

/*
    webpack.config.js webpack的配置文件
    作用:指示webpack干哪些活(當(dāng)你運(yùn)行webpack指令時(shí),會(huì)加載里面的配置)所有構(gòu)建工具都是基于nodejs平臺(tái)運(yùn)行的~模塊化默認(rèn)采用commonjs.
    loader: 1.下載 2.使用(配置loader)
    plugins: 1.下載2. 引入 3.使用

    路徑： ./webpack.config.js
*/

// resolve用來(lái)拼接絕對(duì)路徑的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack配置
    // 入口起點(diǎn)文件
    entry: './src/index.js',
    // 輸出
    output: {
        //輸出文件名
        filename: 'built.js',
        //輸出路徑
        //__dirname nodejs的變量,代表當(dāng)前文件的目錄絕對(duì)路徑
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細(xì)loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進(jìn)行處理
                use: [
                    // use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
                    //創(chuàng)建style標(biāo)簽,將js中的樣式資源插入進(jìn)行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
                    'css-loader'
                ]
            },
            {
                //問(wèn)題：默認(rèn)處理不了 html 中的 img 圖片
                //處理圖片資源
                test: /\.(jpg|png|gif)$/,
                //使用一個(gè)loader
                //下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會(huì)被base64處理
                    //優(yōu)點(diǎn):減少請(qǐng)求數(shù)量(減輕服務(wù)器壓力)
                    //缺點(diǎn):圖片體積會(huì)更大(文件請(qǐng)求速度更慢)
                    limit: 8 * 1024,
                    //問(wèn)題:因?yàn)閡rl-loader默認(rèn)使用es6模塊化解析, 而html-loader默認(rèn)引入圖片是commonjs
                    //解析時(shí)會(huì)出問(wèn)題: [object Module]
                    //解決:關(guān)閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進(jìn)行重命名
                    //[hash:10]取圖片的hash的前10位
                    // [ext]取文件原來(lái)擴(kuò)展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                //處理html文件的img圖片(負(fù)責(zé)引入img,從而能被url-loader進(jìn)行處理)
                loader: 'html-loader',
                options:
                {
                    //默認(rèn)情況下,生成使用ES塊語(yǔ)法的Js模塊
                    //問(wèn)題:生成的圖片顯示錯(cuò)誤
                    //解決: esModule改為false
                    esModule: false,
                },
            }
        ]
    },
    // plugins的配置
    plugins: [
        //詳細(xì)的plugins配置
        //html-webpack-plugin
        //功能:默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML, 自動(dòng)引入打包輸出的所有資源(JS/CSS)
        //需求:需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            //復(fù)制../src/index.html'文件,并自動(dòng)引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html'
        })
    ],
    //模式  development  開發(fā)環(huán)境，production 生產(chǎn)環(huán)境
    mode: 'development',
    // mode: 'production'
}

2.3、安裝 loader 和插件

在項(xiàng)目文件夾下打開終端運(yùn)行以下命令

# 打包c(diǎn)ss 文件時(shí)用到css-loader和style-loader
> # 安裝 style-loader和css-loader
> npm i css-loader style-loader -D

# 打包圖片文件用到url-loader 和 file-loader
# 安裝 url-loader 和 file-loader 
> npm i url-loader file-loader  -D
# html 中引用了圖片需要用到 html-loader
> # 在安裝 url-loader 和 file-loader 的基礎(chǔ)上安裝 html-loader
> npm i html-loader -D

#打包 html 文件用到html-webpack-plugin 插件
# 安裝 html-webpack-plugin 插件
> npm i html-webpack-plugin -D

2.4、執(zhí)行打包

在項(xiàng)目文件夾下打開終端運(yùn)行以下命令

> webpack

2.5、打包完后目錄結(jié)構(gòu)

.
├── build
│   ├── 2bd7a1d86f.png
│   ├── be0c215ecf.png
│   ├── built.js
│   └── index.html
├── src
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   ├── logo1.png
│   ├── logo2.png
│   └── logo3.png
├── package-lock.json
├── package.json
└── webpack.config.js

其中 build 文件內(nèi)的內(nèi)容就是 webpack打包出來(lái)的產(chǎn)物，css 文件和小于8 kb的圖片都被打包進(jìn)入了 built.js 文件

posted @ 2023-08-20 23:48 Eword 閱讀(519) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

Eword`s Home

鷹的精神,無(wú)人扶我上青云,獨(dú)身也可登昆侖。

webpack 是什么

webpack 是什么

一、webpack的初體驗(yàn)

1.1、初始化環(huán)境

1.2、安裝 webpack

1.3、運(yùn)行指令

1.3.1、創(chuàng)建入口js文件

1.3.2、開發(fā)環(huán)境運(yùn)行

1.3.3、生產(chǎn)環(huán)境運(yùn)行

二、使用 webpack.config.js 配置執(zhí)行打包

2.1、index各文件內(nèi)容

2.2、webpack.config.js 配置文件內(nèi)容

2.3、安裝 loader 和插件

2.4、執(zhí)行打包

2.5、打包完后目錄結(jié)構(gòu)

公告