1. 編程環境

1. 假設大家都裝了 NodeJS環境，並且了解 npm

   的基礎用法。

2. 我使用 Macbook 的 Shell，所以加 sudo。Windows 環境下也測試無誤，建議使用 Git Shell 工具，但是請輸命令的時候，不要加 sudo。

2. 工具簡介

• Webpack 是德國開發者 Tobias Koppers 開發的模塊載入器. 在 Webpack 當中, 所有的資源都被當作是模塊, JS, CSS, 圖片等。其功能強大，我已經用來取代 Grunt/Gulp 等構建工具，處理 CSS 和 JS，完全滿足我工作需求。

• PostCSS 是對 CSS 本身做模塊化轉換，轉換功能分別由不同插件配合完成，因此可以個性化配置。體驗上比 Sass 更強大和靈活，並且速度更快。另外由於不同功能模塊完全獨立，所以更容易維護和升級。

  （需要注意，webpack2 並沒有完全兼容 1 的配置。）

3. 初始化和安裝

下面我們分別安裝所需的模塊。

3.1 創建配置

用命令行切換到項目目錄下，初始化 package.json文件.

3.2 安裝 Webpack2

由於是 Beta 版，所以安裝時必須指定版本。我安裝的是如下版本：

webpack 的構建過程，是基於不同的載入器。每種文件類型，對應自己的載入器。

使用 PostCSS，至少安裝下面三種載入器：

為了方便開發，還需要裝 webpack-dev-server 對應的 Beta 版。稍後會解釋做什麼用途~

3.3 安裝 PostCSS

由於 PostCSS 是一個插件平台，每個人所需的「功能模塊」都不同，所以我這裡只演示我個人配置。

安裝 Postcss

安裝我所需的功能模塊

sudo npm i -D cssnext postcss-atroot postcss-conditionals postcss-each postcss-extend postcss-for postcss-import postcss-mixins postcss-nested postcss-simple-vars

4. 配置webpack2

webpack 做的事情是用對應的 loader(載入器)，去載入和解析資源。

. css 有 CSS載入器；

. png 有 圖片載入器；

. js 有 JS載入器；

…

本文稍後會講如何配置一個 css 載入器，使用 PostCSS 去解析 .css 資源。

通常，我們使用 webpack 生成一個 bundle.js 文件。這個文件是所有 資源的集合 ，HTML 只需引用這個文件即可。

但是在開發環境中，我們並不需要真正的生成一個 bundle.js 文件，因為實時編譯和生成，效率很低。

那怎麼辦呢？讓他存在內存中即可，而後 HTML 引用內存中的 bundle.js 內容。這樣做，實時編譯時效率更高，並且方便調試。

為此，我們還需要安裝 webpack-dev-server！

這是一個基於 Express 的微型 HTTP 伺服器，他可以在本地通過 http:// 的方式訪問項目文件。主要功能是 虛擬HTML 和 虛擬bundle.js ，也就是說他們不必真的存在，只需要在內存中運行。並且通過功能擴展插件，可以繼承其他強大功能。

我們可以直接通過在命令行，使用 webpack 命令 結合各選項設定，完成構建工作。但是這樣並不方便，所以我們需要創建 webpack.config.js 配置文件，這樣我們只需要簡短的命令，就能夠應用複雜的配置。運行 webpack 時會默認讀取當前命令行目錄下的 webpack.config.js 文件里的配置。

我們可以在編輯器里新建，或者是通過命令行創建這個配置文件：

之後編輯配置文件(webpack.config.js)：

上面配置中的路徑，是我項目使用的路徑。

/src 存放源文件

/dist 構建結果(生產環境使用)

5. 配置postcss

PostCSS 的配置文件，我們採用外置的方式.

在項目根目錄下創建 postcss.config.js 文件，輸入配置：

到目前為止，我們已經實現了目標！只需在命令行輸入以下命令，等待文件構建，便可在瀏覽器中查看了！

webpack-dev-server

6. 外置css

因為 webpack 的特點，CSS 會被嵌入到 HTML 的 Style 里，這對於多數前端來說很不方便。如果你介意，那麼可以通過 extract-text-webpack-plugin 插件，提取 CSS 到獨立的文件中。

6.1 安裝

需要裝最新的測試版，才能在 webpack2 中正常工作：

6.2 配置

要修改 webpack.config.js 文件，在最開始引入模塊：

還要修改 module 部分的配置，修改 css 載入器：

(webpack.config.js)

還要修改 plugins 部分的配置，增加一條插件配置：

(webpack.config.js)

7. 命名簡寫

修改 package.json 文件，在 『scripts』 部分，加入一條 start 命令:

這樣可以在命令行通過簡易的方式，運行 webpack-dev-server。特別適合有額外參數的時候~

#啟用構建npm start

8. 總結

webpack2配置postcss有兩種方式:

8.1 使用postcss.config.js

安裝postcss-load-config

配置postcss.config.js

8.2 webpack LoaderOptionsPlugin

第二種辦法是webpack.config.js使用LoaderOptionsPlugin

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！