1. 編程環(huán)境
- 假設大家都裝了 NodeJS環(huán)境，并且了解 npm的基礎用法。
- 我使用 Macbook 的 Shell，所以加 sudo。Windows 環(huán)境下也測試無誤，建議使用 Git Shell 工具，但是請輸命令的時候，不要加 sudo。
2. 工具簡介
- Webpack 是德國開發(fā)者 Tobias Koppers 開發(fā)的模塊加載器. 在 Webpack 當中, 所有的資源都被當作是模塊, JS, CSS, 圖片等。其功能強大，我已經(jīng)用來取代 Grunt/Gulp 等構建工具，處理 CSS 和 JS，完全滿足我工作需求。
- PostCSS 是對 CSS 本身做模塊化轉換，轉換功能分別由不同插件配合完成，因此可以個性化配置。體驗上比 Sass 更強大和靈活，并且速度更快。另外由于不同功能模塊完全獨立，所以更容易維護和升級。
（需要注意，webpack2 并沒有完全兼容 1 的配置。）
3. 初始化和安裝
下面我們分別安裝所需的模塊。
3.1 創(chuàng)建配置
用命令行切換到項目目錄下，初始化 package.json文件.
sudo npm init -y #初始化 package，并且全部選項 yes
這個命令會在項目文件夾下生成一個 package.json 文件，用來管理 nodejs 模塊。
3.2 安裝 Webpack2
由于是 Beta 版，所以安裝時必須指定版本。我安裝的是如下版本：
sudo npm i -D webpack@2.1.0-beta.27
i 是 install 的縮寫用法
-D 是 --save-dev 的縮寫用法，dev 意思是用在開發(fā)環(huán)境
webpack 的構建過程，是基于不同的加載器。每種文件類型，對應自己的加載器。
使用 PostCSS，至少安裝下面三種加載器：
安裝 樣式加載器、CSS加載器、PostCSS加載器
sudo npm i -D style-loader css-loader postcss-loader
為了方便開發(fā)，還需要裝 webpack-dev-server 對應的 Beta 版。稍后會解釋做什么用途~
sudo npm i -D webpack-dev-server@2.1.0-beta.12
3.3 安裝 PostCSS
由于 PostCSS 是一個插件平臺，每個人所需的“功能模塊”都不同，所以我這里只演示我個人配置。
安裝 Postcss
sudo npm i -D 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 只需引用這個文件即可。
但是在開發(fā)環(huán)境中，我們并不需要真正的生成一個 bundle.js 文件，因為實時編譯和生成，效率很低。
那怎么辦呢？讓他存在內(nèi)存中即可，而后 HTML 引用內(nèi)存中的 bundle.js 內(nèi)容。這樣做，實時編譯時效率更高，并且方便調試。
為此，我們還需要安裝 webpack-dev-server！
這是一個基于 Express 的微型 HTTP 服務器，他可以在本地通過 http:// 的方式訪問項目文件。主要功能是 虛擬HTML 和 虛擬bundle.js ，也就是說他們不必真的存在，只需要在內(nèi)存中運行。并且通過功能擴展插件，可以繼承其他強大功能。
我們可以直接通過在命令行，使用 webpack 命令 結合各選項設定，完成構建工作。但是這樣并不方便，所以我們需要創(chuàng)建 webpack.config.js 配置文件，這樣我們只需要簡短的命令，就能夠應用復雜的配置。運行 webpack 時會默認讀取當前命令行目錄下的 webpack.config.js 文件里的配置。
我們可以在編輯器里新建，或者是通過命令行創(chuàng)建這個配置文件：
sudo touch webpack.config.js #在當前目錄下 創(chuàng)建 webpack.config.js 文件
之后編輯配置文件(webpack.config.js)：
//加載 webpack.
const webpack = require('webpack');
//創(chuàng)建 webpack 配置.
const config = {
//入口程序，支持 字符串 或 數(shù)組（多個入口）.
entry: [
//應用程序入口.
__dirname + '/src/index.js'
],
//輸出配置，包含額外選項.
output: {
//輸出文件.
filename: 'bundle.js',
//輸出路徑.
path: __dirname + '/src',
//HMR 知道在哪里加載，這是熱更新模塊所必需的
publicPath: '/'
},
//基本目錄，一個絕對路徑，用于從配置中解析入口點和裝載器。
context: __dirname + '/src',
//生成 source map（源映射）.
devtool: 'inline-source-map',
//webpack-dev-server 配置選項
devServer: {
//如果要對資產(chǎn)啟用 gzip 壓縮，請設置此值
compress: true,
//匹配輸出路徑，也可以是一個數(shù)組，或者 contentBase: "http://localhost/"
contentBase: __dirname + '/src',
//捆綁的文件將在此路徑下的瀏覽器中可用
publicPath: '/',
//指定要偵聽請求的端口號.
port: 8080,
},
//這些選項確定如何處理項目中不同類型的模塊。
module: {
rules: [
// CSS 和 POSTCSS 加載器，使用嵌入 CSS.
{
//設置對應的資源后綴.
test: /\.(css|scss)$/,
//設置后綴對應的加載器.
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader?modules' },
{ loader: 'postcss-loader' },
]
}
]
}
//插件以各種方式定制 webpack 構建過程
plugins: [
//跳過編譯時出錯的代碼并記錄，使編譯后運行時的包不會發(fā)生錯誤。
new webpack.NoErrorsPlugin(),
//在 HMR 更新的瀏覽器控制臺中打印更易讀的模塊名稱
new webpack.NamedModulesPlugin(),
]
};
//導出模塊.
module.exports = config;
上面配置中的路徑，是我項目使用的路徑。
/src 存放源文件
/dist 構建結果(生產(chǎn)環(huán)境使用)
5. 配置postcss
PostCSS 的配置文件，我們采用外置的方式.
在項目根目錄下創(chuàng)建 postcss.config.js 文件，輸入配置：
module.exports = {
plugins: [
require('postcss-conditionals')(),
require('postcss-simple-vars')(), //https://www.npmjs.com/package/postcss-simple-vars
require('postcss-each')(),
require('postcss-for')(),
require('postcss-mixins')(),
require('postcss-import')(),
require('postcss-nested')(),
require('postcss-atroot')(),
require('cssnext')({
features: {rem: false}
}),
require('postcss-extend')()
]
}
到目前為止，我們已經(jīng)實現(xiàn)了目標！只需在命令行輸入以下命令，等待文件構建，便可在瀏覽器中查看了！
webpack-dev-server
6. 外置css
因為 webpack 的特點，CSS 會被嵌入到 HTML 的 Style 里，這對于多數(shù)前端來說很不方便。如果你介意，那么可以通過 extract-text-webpack-plugin 插件，提取 CSS 到獨立的文件中。
6.1 安裝
需要裝最新的測試版，才能在 webpack2 中正常工作：
sudo npm i -D extract-text-webpack-plugin@2.0.0-beta.4
6.2 配置
要修改 webpack.config.js 文件，在最開始引入模塊：
//加載CSS提取模塊
const ExtractTextPlugin = require("extract-text-webpack-plugin");
還要修改 module 部分的配置，修改 css 加載器：
(webpack.config.js)
//原來
/*
{
test: /\.(css|scss)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader?modules' },
{ loader: 'postcss-loader' },
]
}
*/
//新的
{
test: /\.(css|scss)$/,
use: [
{
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules', 'postcss-loader')
}
]
}
還要修改 plugins 部分的配置，增加一條插件配置：
(webpack.config.js)
//樣式存成 'global.css' 文件.
new ExtractTextPlugin("global.css")
7. 命名簡寫
修改 package.json 文件，在 ‘scripts’ 部分，加入一條 start 命令:
{
"scripts": {
"start": "webpack-dev-server"
}
}
這樣可以在命令行通過簡易的方式，運行 webpack-dev-server。特別適合有額外參數(shù)的時候~
啟用構建
npm start
8. 總結
webpack2配置postcss有兩種方式:
8.1 使用postcss.config.js
安裝postcss-load-config
配置postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
}
8.2 webpack LoaderOptionsPlugin
第二種辦法是webpack.config.js使用LoaderOptionsPlugin
module.exports = {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: function(){
return [
require("autoprefixer")({
browsers: ['ie>=8','>1% in CN']
})
]
}
}
})
]
}
前端學習交流QQ群：461593224
