webpack 入門教程

在安裝node的前提下使用npm安裝：

1、全域性安裝：

npm install webpack -g

2、本地專案安裝：

進入專案目錄

npm init 生成package.json檔案

npm install webpack --s**e-dev 寫入 package.json 包

安裝完成後使用命令提示符執行webpack-v檢視是否正確安裝，出現相應版本號則已正確安裝；

3、如果需要使用 webpack 開發工具，要單獨安裝：

npm install webpack-dev-server --s**e-dev

1、首先建立乙個靜態頁面 index.html 和乙個 js 入口檔案 entry.js：


<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
head
>
<
body
>
<
script 
src="bundle.js"
>
script
>
body
>
html
>

//
entry.js
document.write('it works.')

2、使用webpack編譯entry.js,並打包到bundle.js

webpack entry.js bundle.js

用瀏覽器開啟index.html將會看到it works.

3、新增乙個模組module.js並修改入口entry.js：

module.js

//定義模組

module.exports = 'it works from module.js.'

//
entry.js
document.write("你好，世界");

//接收模組

document.write(require("./module.js"));

重新打包webpack entry.js bundle.js後重新整理頁面看到變化it works.it works from module.js.

webpack 會分析入口檔案，解析包含依賴關係的各個檔案。這些檔案（模組）都打包到 bundle.js 。

webpack 會給每個模組分配乙個唯一的 id 並通過這個 id 索引和訪問模組。在頁面啟動時，會先執行 entry.js 中的**，其它模組會在執行require的時候再執行。

每個專案下都必須有乙個 webpack.config.js ，webpack.config.js 是 webpack 的構建配置檔案，它的作用如同常規的 gulpfile.js/gruntfile.js ，就是乙個配置項，告訴 webpack 它需要做什麼；

在package.js檔案下新增依賴項：

"author": "",

"license": "isc",

"devdependencies":

}

執行 npm install

然後建立乙個配置檔案webpack.config.js：

var webpack = require('webpack')
module.exports =,
module: 
]}}

同時簡化entry.js中的style.css載入方式：

require('./style.css')

最後執行webpack

webpack.config.js配置項：

1.entry

entry可以是個字串或陣列或者是物件。

當entry是個字串的時候，用來定義入口檔案：

entry: './js/main.js'

當entry是個陣列的時候，裡面同樣包含入口js檔案，另外乙個引數可以是用來配置webpack提供的乙個靜態資源伺服器，webpack-dev-server。webpack-dev-server會監控專案中每乙個檔案的變化，實時的進行構建，並且自動重新整理頁面：

entry: [
'webpack/hot/only-dev-server',

當entry是個物件的時候，我們可以將不同的檔案構建成不同的檔案，按需使用，比如在我的hello頁面中只要\引入hello.js即可：

entry:

2.output

output引數是個物件，用於定義構建後的檔案的輸出。其中包含path和filename：

output:

當我們在entry中定義構建多個檔案時，filename可以對應的更改為[name].js用於定義不同檔案構建後的名字。

3.module

關於模組的載入相關，我們就定義在module.loaders中。這裡通過正規表示式去匹配不同字尾的檔名，然後給它們定義不同的載入器。比如說給less檔案定義串聯的三個載入器（！用來定義級聯關係）多個loader之間用「!」連線起來：

module: ,,,
]}

require('./bootstrap.css');
var img = document.createelement('img');
img.src = require('./glyph.png');

但是需要知道的是，這樣require來的檔案會內聯到 js bundle中。如果我們需要把保留require的寫法又想把css檔案單獨拿出來，可以使用下面提到的[extract-text-webpack-plugin]外掛程式。

在上面示例**中配置的第乙個loaders我們可以看到乙個叫做react-hot的載入器。我的專案是用來學習react寫相關**的，所以配置了乙個react-hot載入器，通過它，可以實現對react元件的熱替換。我們已經在entry引數中配置了webpack/hot/only-dev-server,所以我們只要在啟動webpack開發伺服器時開啟–hot引數，就可以使用react-hot-loader了。在package.json檔案中這樣定義：

"scripts":

4.resolve

webpack在構建包的時候會按目錄的進行檔案的查詢，resolve屬性中的extensions陣列中用於配置程式可以自行補全哪些檔案字尾：

resolve:

然後我們想要載入乙個js檔案時，只要require(『common』)就可以載入common.js檔案了。

6.externals

當我們想在專案中require一些其他的類庫或者api，而又不想讓這些類庫的原始碼被構建到執行時檔案中，這在實際開發中很有必要。此時我們就可以通過配置externals引數來解決這個問題：

externals:

這樣我們就可以放心的在專案中使用這些api了：var jquery = require(「jquery」);

webpack 入門教程

CSS入門教程

CSS入門教程

Linux入門教程

webpack 入門教程

CSS入門教程

CSS入門教程

Linux入門教程

相關推薦