使用Webpack打包的流程分析

更新時(shí)間：2022年12月19日 10:27:01 作者：Eric-x

Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源，這篇文章主要介紹了使用Webpack打包的操作方法,需要的朋友可以參考下

1、webpacks是什么？

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)文件，減少了頁面的請(qǐng)求。

在這里插入圖片描述

2、Webpack安裝

安裝webpack之前需要先安裝好npm，不會(huì)的小伙伴可以這篇文章：node.js基本使用，因?yàn)閚ode.js中自帶npm，所以安裝了node.js就可以了

額外補(bǔ)充一下npm

NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態(tài)系統(tǒng)，里面所有的模塊都是開源免費(fèi)的；也是Node.js的包管理工具，相當(dāng)于后端的Maven 。

安裝webpack

npm install -g webpack webpack-cli #全局安裝

安裝后可以查看版本號(hào)：webpack -v

3、初始化項(xiàng)目

在使用webpack打包之前，我們首先要先創(chuàng)建一個(gè)項(xiàng)目

1、創(chuàng)建一個(gè)webpack文件夾，在該文件夾下打開終端，
執(zhí)行命令：npm init-y

2、在webpack文件夾中創(chuàng)建一個(gè)src文件夾
3、在src下創(chuàng)建：common.js文件

exports.info = function (str) {
    document.write(str);
}

4、在src下創(chuàng)建：src下創(chuàng)建utils.js文件

exports.add = function (a, b) {
    return a + b;
}

5、在src下創(chuàng)建：src下創(chuàng)建main.js文件

//引入外部js
const common = require('./common.js'); 
const utils = require('./utils.js');

//調(diào)用方法
common.info('Hello world!' + utils.add(100, 200));

4、使用webpack進(jìn)行JS打包

1、在webpack目錄下創(chuàng)建配置文件webpack.config.js，內(nèi)容如下

const path = require("path"); //Node.js內(nèi)置模塊
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當(dāng)前文件所在路徑
        filename: 'bundle.js' //輸出文件
    }
}

以上配置的意思是：讀取當(dāng)前項(xiàng)目目錄下src文件夾中的main.js（入口文件）內(nèi)容，分析資源依賴，把相關(guān)的js文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的js文件名為bundle.js

2、在webpack目錄下創(chuàng)建dist目錄準(zhǔn)備
3、在webpack目錄下打開終端執(zhí)行編譯命令（執(zhí)行兩個(gè)命令任意一個(gè)即可）

webpack #有黃色警告
webpack --mode=development #沒有警告
#執(zhí)行后查看bundle.js 里面包含了上面兩個(gè)js文件的內(nèi)容并驚醒了代碼壓縮

4、在webpack目錄下創(chuàng)建index.html，內(nèi)容如下

<body>
	//引入bundle.js
    <script src="dist/bundle.js"></script>
</body>

5、在瀏覽器打開該網(wǎng)頁，就能看到輸出內(nèi)容啦！

5、使用webpack進(jìn)行CSS打包

1、安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。

Loader 可以理解為是模塊和資源的轉(zhuǎn)換器。

首先我們需要安裝相關(guān)Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認(rèn)識(shí)css

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

2、修改webpack.config.js，內(nèi)容如下

const path = require("path"); //Node.js內(nèi)置模塊
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當(dāng)前文件所在路徑
        filename: 'bundle.js' //輸出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規(guī)則應(yīng)用到以css結(jié)尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夾下創(chuàng)建style.css，內(nèi)容隨意，這里就給個(gè)網(wǎng)頁背景