如何學習 Webpack

2021-09-07 12:06:12 字數 3754 閱讀 5133

tip:

本文是 webpack-howto 的原文,我覺得這篇文章寫得非常好,確實算是目前學習 webpack 入門的必讀文章。直接收錄之。

這是一本教你如何應用webpack到你的專案中的工具書。它包含了我們在instagram中用到的絕大多數的內容。

我的建議:這個教程作為你第乙個webpack的文件,學習完以後去看它的官方文件,了解更詳細的說明。

它可以替代gulp和grunt因為他可以構建打包css、預處理css、編譯js和等。

它支援amd和commonjs,以及其他的模組系統(angular, es6)。如果你不太熟悉如何使用,就用commonjs吧。

下面的命令是等價的:

browserify main.js > bundle.js
webpack main.js bundle.js
然而,webpack要比browserify強大。所以一般情況下你需要建立乙個webpack.config.js檔案來配置webpack。

// webpack.config.js

module.exports =

};

這就是單純的js,所有寫這個配置檔案毫無壓力。

選擇乙個目錄下有webpack.config.js檔案的資料夾,然後執行下面的命令:

webpack可以和browserify、requirejs一樣作為乙個loader(載入工具)來使用。下面我們來看下如何使用webpack去載入、編譯coffeescript和jsx+es6。(這裡你必須先npm install babel-loader coffee-loader):

你也要看下babel-loader的介紹,它會作為乙個開發環境下的依賴載入到我們的專案中(runnpm install babel-core babel-preset-es2015 babel-preset-react)

// webpack.config.js

module.exports = ,

module: ,}]

}};

如果你希望在require檔案時省略檔案的副檔名,只需要在webpack.config.js中新增resolve.extensions來配置。

// webpack.config.js

module.exports = ,

module: ,}]

},resolve:

};

首先你需要用require()去載入你的靜態資源(named as they would with node'srequire()):

require('./bootstrap.css');

var img = document.createelement('img');

img.src = require('./glyph.png');

當你require了css(less或者其他)檔案,webpack會在頁面中插入乙個內聯的,去引入樣式。當require的時候,bundle檔案會包含的url,並通過require()返回的url。

但是這需要你在webpack.config.js做相應的配置(這裡還是使用loaders)

// webpack.config.js

module.exports = ,

module: , // 用!去鏈式呼叫loader

,// 內聯的base64的位址,要小於8k,直接的url的位址則不解析

]}};

專案中有些**我們只為在開發環境(例如日誌)或者是內部測試環境(例如那些沒有發布的新功能)中使用,那就需要引入下面這些魔法全域性變數(magic globals):

if (__dev__) 

// ...

if (__prerelease__)

同時還要在webpack.config.js中配置這些變數,使得webpack能夠識別他們。

// webpack.config.js

// defineplugin 會把定義的string 變數插入到js**中。

var defineplugin = new webpack.defineplugin();

module.exports = ,

plugins: [defineplugin]

};

配置完成後,就可以使用build_dev=1 build_prerelease=1 webpack來打包**了。

值得注意的是,webpack -p會刪除所有無作用**,也就是說那些包裹在這些全域性變數下的**塊都會被刪除,這樣就能保證這些**不會因發布上線而洩露。

// webpack.config.js

module.exports = ,

output:

};

在profile頁面中插入。feed也一樣。

feed和profile頁面存在大量通用**(比如react、公共的樣式和元件等等)。webpack可以抽離頁面間公共的**,生成乙個公共的bundle檔案,供這兩個頁面快取使用:

// webpack.config.js

var webpack = require('webpack');

var commonsplugin =

new webpack.optimize.commonschunkplugin('common.js'); // 引入外掛程式

module.exports = ,

output: ,

plugins: [commonsplugin]

};

在上一步引入自己的bundle之前引入

雖然commonjs是同步載入的,但是webpack也提供了非同步載入的方式。這對於單頁應用中使用的客戶端路由非常有用。當真正路由到了某個頁面的時候,它的**才會被載入下來。

指定你要非同步載入的拆分點。看下面的例子

if (window.location.pathname === '/feed') );

} else if (window.location.pathname === '/profile') );

}

剩下的事就可以交給webpack,它會為你生成並載入這些額外的chunk檔案。

webpack 缺省會從專案的根目錄下引入這些chunk檔案。你也可以通過output.publicpath來配置chunk檔案的引入路徑

// webpack.config.js

output:

相比較browserify和browserify,在你的專案中大量的使用webpack外掛程式才能體現出webpack的優勢。當使用了外掛程式後,**才會被複寫。其餘的都是預設載入。

如何學習 Webpack

tip 本文是 webpack howto 的原文,我覺得這篇文章寫得非常好,確實算是目前學習 webpack 入門的必讀文章。直接收錄之。這是一本教你如何應用webpack到你的專案中的工具書。它包含了我們在instagram中用到的絕大多數的內容。我的建議 這個教程作為你第乙個webpack的文...

如何學習 Webpack

tip 本文是 webpack howto 的原文,我覺得這篇文章寫得非常好,確實算是目前學習 webpack 入門的必讀文章。直接收錄之。這是一本教你如何應用webpack到你的專案中的工具書。它包含了我們在instagram中用到的絕大多數的內容。我的建議 這個教程作為你第乙個webpack的文...

webpack學習之路之webpack核心概念

webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口,這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口,告...