這篇文章主要講解了webpack打包原理及如何實(shí)現(xiàn)loader和plugin，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)建站專注于濟(jì)陽(yáng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供濟(jì)陽(yáng)營(yíng)銷型網(wǎng)站建設(shè)，濟(jì)陽(yáng)網(wǎng)站制作、濟(jì)陽(yáng)網(wǎng)頁(yè)設(shè)計(jì)、濟(jì)陽(yáng)網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造濟(jì)陽(yáng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供濟(jì)陽(yáng)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

1. webpack打包基本原理

webpack的一個(gè)核心功能就是把我們寫的模塊化的代碼，打包之后，生成可以在瀏覽器中運(yùn)行的代碼，我們這里也是從簡(jiǎn)單開始，一步步探索webpack的打包原理

1.1 一個(gè)簡(jiǎn)單的需求

我們首先建立一個(gè)空的項(xiàng)目，使用 npm init -y 快速初始化一個(gè) package.json ，然后安裝 webpack webpack-cli

接下來，在根目錄下創(chuàng)建 src 目錄， src 目錄下創(chuàng)建 index.js ， add.js ， minus.js ，根目錄下創(chuàng)建 index.html ，其中 index.html 引入 index.js ，在 index.js 引入 add.js ， minus.js ，

目錄結(jié)構(gòu)如下：

文件內(nèi)容如下：

// add.js
export default (a, b) => {
 return a + b
}
// minus.js
export const minus = (a, b) => {
 return a - b
}
// index.js
import add from './add.js'
import { minus } from './minus.js'

const sum = add(1, 2)
const division = minus(2, 1)
console.log('sum>>>>>', sum)
console.log('division>>>>>', division)

分享題目：webpack打包原理及如何實(shí)現(xiàn)loader和plugin-創(chuàng)新互聯(lián)
新聞來源：http://weahome.cn/article/dsdchj.html