如何學習 Webpack

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

如何學習 Webpack

如何學習 Webpack

webpack學習之路之webpack核心概念

相關推薦