【webpack20210627-0】webpack 資源打包詳解

webpack 資源打包詳解

一、webpack 五大核心概念

1.1、Entry

入口(Entry)指示Webpack以哪個文件為入口起點開始打包,分析構建內部依賴圖。

1.2、Output

輸出(Output)指示Webpack打包后的資源bundles輸出到哪里去,以及如何命名。

1.3、Loader

Loaderi Webpack能夠去處理那些非Javascript文件(webpack 自身只理解JavaScript)

1.4、Plugins

插件(Plugins)可以用于執行范圍更廣的任務。插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量等。

1.5、Mode

模式(Mode)指示Webpack使用相應模式的配置。

選項	描述	特點
development	會將process.env.NODEENV的值設為development。啟用NamedchunksPlugin和NamedModulesPlugin。	能讓代碼本地調試運行的環境
production	會將process.env.NODE_ENV的值設為production 啟用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifysPlugin.	能讓代碼優化上線運行的環境

二、webpack的初體驗

1.1、初始化環境

> npm init

1.2、安裝 webpack

//  全局安裝
//  npm i  webpack webpack-cli -g 
//  本地安裝
> npm i  webpack webpack-cli -D

1.3、運行指令

1.3.1、創建入口js文件

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

1.3.2、開發環境運行

// 開發環境
// webpack會以./src/index.js為入口文件開始打包,打包后輸出到./build/built.js整體打包環境,是開發環境
> webpack ./src/index.js -o./build/built.js--mode-development

1.3.3、生產環境運行

// 生產環境
// webpack會以./src/index.js為入口文件開始打包,打包后輸出到./build/built.js整體打包環境,是生產環境
> webpack ./src/index.js -o ./build/built.js--mode-production

結論:

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

2、生產環境和開發環境將ES6模塊化編譯成瀏覽器能識別的模塊化

3、生產環境比開發環境多一個壓縮js代碼

三、打包樣式資源

3.1、創建html文件、 css 文件或 less 文件

<!-- 文件路徑 ./src/index.htmnl -->
<!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 學習</title>
</head>
<body>
    <h1 id="title">hello webpack</h1>
</body>
</html>

/* 路徑： ./src/index.css */

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: Dpink;
}

// 路徑： ./src/index.less

#title{
    color: #fff;
}

3.2、引入 css 文件或 less 文件

在 index.js 文件中引入 css 文件

// index. js: webpack入口起點文件
// 路徑： ./src/index.js


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

//……

3.3、配置 webpack配置文件

// webpack.config.js webpack的配置文件 
// 作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
// loader: 1.下載 2.使用(配置loader)
// plugins: 1.下載2. 引入 3.使用

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


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

module.exports = {
        // webpack配置
        // 入口起點文件
        entry: './src/index.js',
        // 輸出
        output: {
            //輸出文件名
            filename: 'built.js',
            //輸出路徑
            //__dirname nodejs的變量,代表當前文件的目錄絕對路徑
            path: resolve(__dirname, 'build')
        },
        // loader的配置
        module: {
            rules: [
                //打包 css 文件的詳細loader配置
                {
                    //匹配哪些文件
                    test: /\.css$/,
                    //使用哪些loader進行處理
                    use: [
                        // use數組中loader執行順序:從右到左,從下到上依次執行
                        //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                        'style-loader',
                        //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                        'css-loader'
                    ]
                },
                //打包less 文件的詳細loader配置
                {
                    //匹配哪些文件
                    test: /\.less$/,
                    //使用哪些loader進行處理
                    use: [
                        // use數組中loader執行順序:從右到左,從下到上依次執行
                        //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                        'style-loader',
                        //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                        'css-loader',
                        //將less文件編譯成css文件
                        //需要下載less-loader和less
                        'less-loader'
                    ]
                }
            ]
        },
        // plugins的配置
        plugins: [
            //詳細的plugins配置
            //html-webpack-plugin
            //功能:默認公創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
            //需求:需要有結構的HTML文件
            new HtmlWebpackPlugin({
                //復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
                template: './src/index.html'
            })
        ],
        //模式  development  開發環境，production 生產環境
        mode: 'development',
        // mode: 'production'
    }

3.4、打包 css 文件的核心配置

// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js

//……

// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader'
                ]
            },
        ]
    },

//……

3.5、打包 less 文件的核心配置

// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js

//……

// loader的配置
    module: {
        rules: [
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            }
        ]
    },

//……

3.6、安裝對應 loader

// 安裝 style-loader和css-loader
> npm i css-loader style-loader -D
// 安裝 less-loader 和 less
> npm i less less-loader -D

3.7、運行

> webpack

結論： > 1、打包css 文件樣式資源主要使用 style-loader 和 css-loader。
> 2、打包less 文件樣式資源主要使用 style-loader 、css-loader和 less-loader。
> 3、多個 loader 時執行順序是從右往左，從下往上。
> 4、樣式文件在處理后會以字符串的形式整合輸出到 built.js文件當中。

四、打包 html 資源

4.1、打包 html文件的核心配置

// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js

//……

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

//……

    // plugins的配置
    plugins: [
        //詳細的plugins配置
        //html-webpack-plugin
        //功能:默認公創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        //需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            //復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html'
        })
    ],

//……

4.2、安裝對應插件

//安裝 html-webpack-plugin 插件
> npm i html-webpack-plugin -D

4.3、運行

> webpack

結論： > 1、打包 html 文件需要使用html-webpack-plugin插件
> 2、html-webpack-plugin需要復制一個有結構的HTML文件，否則默認會創建一個空的HTML
> 3、html-webpack-plugin會自動在打包的html文件中引入打包輸出的所有資源(JS/CSS)

五、打包圖片資源

5.1、打包圖片的核心配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            {
                //問題：默認處理不了 html 中的 img 圖片
                //處理圖片資源
                test: /\.(jpg|png|gif)$/,
                //使用一個loader
                //下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會被base64處理
                    //優點:減少請求數量(減輕服務器壓力)
                    //缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    //問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    //解析時會出問題: [object Module]
                    //解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    //[hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                //處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    //默認情況下,生成使用ES塊語法的Js模塊
                    //問題:生成的圖片顯示錯誤
                    //解決: esModule改為false
                    esModule: false,
                },
            }
        ]
    },

5.2、樣式文件中使用圖片(less場景，css 類似)

#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%;
}

5.2.1、樣式文件中使用圖片時用到的配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            {
                //問題：默認處理不了 html 中的 img 圖片
                //處理圖片資源
                test: /\.(jpg|png|gif)$/,
                //使用一個loader
                //下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會被base64處理
                    //優點:減少請求數量(減輕服務器壓力)
                    //缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    //問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    //解析時會出問題: [object Module]
                    //解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    //[hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]'
                }
            }
    
        ]
    },

5.2.2、安裝對應 loader

//安裝 url-loader 和 file-loader 
> npm i url-loader file-loader  -D

結論

1、先配置 css 或 less 文件的打包配置
2、在配置圖片打包配置，配置使用 url-loader 和 file-loader
3、為了兼容 html 中的圖片打包配置需要關閉url-loader的es6模塊化,使用commonjs解析防止解析完后出現解析時會出問題: [object Module]

5.3、html中使用圖片

<!-- 文件路徑 ./src/index.htmnl -->
<!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 學習</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>

5.3.1、html中使用圖片時用到的配置

// loader的配置
    module: {
        rules: [
            {
                test: /\.html$/,
                //處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    //默認情況下,生成使用ES塊語法的Js模塊
                    //問題:生成的圖片顯示錯誤
                    //解決: esModule改為false
                    esModule: false,
                },
            }
        ]
    },

5.3.2、安裝對應 loader

//在安裝 url-loader 和 file-loader 的基礎上安裝 html-loader
> npm i html-loader -D

結論

1、配置圖片打包配置，配置使用 url-loader 、file-loader 和 html-loader
3、為了兼容 html 中的圖片打包配置需要關閉html-loader的es6模塊化,防止生成的圖片顯示錯誤

5.4、自定義打包圖片名稱

// 注意loader中以下的配置
    ……
         // 給圖片進行重命名
         //[hash:10]取圖片的hash的前10位
         // [ext]取文件原來擴展名
         name: '[hash:10].[ext]'
    ……

項目中使用 logo1.png、logo2.png、logo3.png 等3張圖片

最終顯示效果如下:

六、打包其他資源

posted @ 2021-06-27 22:34 Eword 閱讀(225) 評論(0) 收藏舉報

刷新頁面返回頂部

Eword`s Home

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

【webpack20210627-0】webpack 資源打包詳解

webpack 資源打包詳解

一、webpack 五大核心概念

1.1、Entry

1.2、Output

1.3、Loader

1.4、Plugins

1.5、Mode

二、webpack的初體驗

1.1、初始化環境

1.2、安裝 webpack

1.3、運行指令

1.3.1、創建入口js文件

1.3.2、開發環境運行

1.3.3、生產環境運行

三、打包樣式資源

3.1、創建html文件、 css 文件或 less 文件

3.2、引入 css 文件或 less 文件

3.3、配置 webpack配置文件

3.4、打包 css 文件的核心配置

3.5、打包 less 文件的核心配置

3.6、安裝對應 loader

3.7、運行

四、打包 html 資源

4.1、打包 html文件的核心配置

4.2、安裝對應插件

4.3、運行

五、打包圖片資源

5.1、打包圖片的核心配置

5.2、樣式文件中使用圖片(less場景，css 類似)

5.2.1、樣式文件中使用圖片時用到的配置

5.2.2、安裝對應 loader

5.3、html中使用圖片

5.3.1、html中使用圖片時用到的配置

5.3.2、安裝對應 loader

5.4、自定義打包圖片名稱

六、打包其他資源

公告

Eword`s Home

鷹的精神,無人扶我上青云,獨身也可登昆侖。

【webpack20210627-0】webpack 資源打包詳解

webpack 資源打包詳解

一、webpack 五大核心概念

1.1、Entry

1.2、Output

1.3、Loader

1.4、Plugins

1.5、Mode

二、webpack的初體驗

1.1、初始化環境

1.2、安裝 webpack

1.3、運行指令

1.3.1、創建入口js文件

1.3.2、開發環境運行

1.3.3、生產環境運行

三、打包樣式資源

3.1、創建html文件、 css 文件或 less 文件

3.2、引入 css 文件或 less 文件

3.3、配置 webpack配置文件

3.4、打包 css 文件的核心配置

3.5、打包 less 文件的核心配置

3.6、安裝對應 loader

3.7、運行

四、打包 html 資源

4.1、打包 html文件的核心配置

4.2、安裝對應插件

4.3、運行

五、打包圖片資源

5.1、打包圖片的核心配置

5.2、樣式文件中使用圖片(less場景，css 類似)

5.2.1、樣式文件中使用圖片時用到的配置

5.2.2、安裝對應 loader

5.3、html中使用圖片

5.3.1、html中使用圖片時用到的配置

5.3.2、安裝對應 loader

5.4、自定義打包圖片名稱

六、打包其他資源

公告

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

一、webpack 五大核心概念

1.1、Entry

1.3、Loader

1.4、Plugins

1.5、Mode

二、webpack的初體驗

1.1、初始化環境

1.2、安裝 webpack

1.3、運行指令

1.3.2、開發環境運行

1.3.3、生產環境運行

三、打包樣式資源

3.2、引入 css 文件或 less 文件

3.3、配置 webpack配置文件

3.7、運行

4.1、打包 html文件的核心配置

4.2、安裝對應插件

4.3、運行

5.1、打包圖片的核心配置

5.2、樣式文件中使用圖片(less場景，css 類似)

5.2.2、安裝對應 loader

5.3、html中使用圖片

5.3.2、安裝對應 loader

5.4、自定義打包圖片名稱

六、打包其他資源