webpack入門

標籤：語言特性   round   操作   例子   第三方   entry   ref   相對   分享   

參考：http://www.jianshu.com/p/42e11515c10f

安裝webpack：npm install webpack -g一切皆模組

Webpack有一個不可不說的優點，它把所有的檔案都可以當做模組處理，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有通過合適的loaders，它們都可以被當做模組被處理。

CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。

......

你還記得嗎？webpack只有單一的入口，其它的模組需要通過 import, require, url等匯入相關位置，為了讓webpack能找到”main.css“檔案，我們把它匯入”main.js “中，如下

//main.jsimport React from ‘react‘;import {render} from ‘react-dom‘;import Greeter from ‘./Greeter‘;import ‘./main.css‘;//使用require匯入css檔案render(<Greeter />, document.getElementById(‘root‘));


通常情況下，css會和js打包到同一個檔案中，並不會打包為一個單獨的css檔案，不過通過合適的配置webpack也可以把css打包為單獨的檔案的。
不過這也只是webpack把css當做模組而已，咱們繼續看看一個真的CSS模組的實踐。

CSS module

在過去的一些年裡，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模組化）發展得非常迅速。模組使得開發人員把複雜的代碼轉化為小的，乾淨的，依賴聲明明確的單元，且基於最佳化工具，依賴管理和載入管理可以自動完成。
不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全域類名，這使得維護和修改都非常困難和複雜。

最近有一個叫做 CSS modules 的技術就意在把JS的模組化思想帶入CSS中來，通過CSS模組，所有的類名，動畫名預設都只作用於當前模組。Webpack從一開始就對CSS模組化提供了支援，在CSS loader中進行配置後，你所需要做的一切就是把”modules“傳遞都所需要的地方，然後就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當前組件有效，不必擔心在不同的模組中具有相同的類名可能會造成的問題。具體的代碼如下

外掛程式（Plugins）

外掛程式（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理源檔案的（JSX，Scss，Less..），一次處理一個，外掛程式並不直接操作單個檔案，它直接對整個構建過程其作用。

Webpack有很多內建外掛程式，同時也有很多第三方外掛程式，可以讓我們完成更加豐富的功能。

使用外掛程式的方法

要使用某個外掛程式，我們需要通過npm安裝它，然後要做的就是在webpack配置中的plugins關鍵字部分添加該外掛程式的一個執行個體（plugins是一個數組）繼續看例子，我們添加了一個實現著作權聲明的外掛程式。

//webpack.config.jsvar webpack = require(‘webpack‘);module.exports = {  devtool: ‘eval-source-map‘,  entry:  __dirname + "/app/main.js",  output: {...},  module: {    loaders: [      { test: /\.json$/, loader: "json" },      { test: /\.js$/, exclude: /node_modules/, loader: ‘babel‘ },      { test: /\.css$/, loader: ‘style!css?modules!postcss‘ }//這裡添加PostCSS    ]  },  postcss: [    require(‘autoprefixer‘)  ],  plugins: [    new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在這個數組中new一個就可以了  ],  devServer: {...}}

 

通過這個外掛程式，打包後的JS檔案顯示如下

知道Webpack中的外掛程式如何使用了，下面給大家推薦幾個常用的外掛程式

HtmlWebpackPlugin

這個外掛程式的作用是依據一個簡單的模板，幫你產生最終的Html5檔案，這個檔案中自動引用了你打包後的JS檔案。每次編譯都在檔案名稱中插入一個不同的雜湊值。

安裝

 npm install --save-dev html-webpack-plugin

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack裡很有用的一個外掛程式，它允許你在修改組件代碼後，自動重新整理即時預覽修改後的效果。
在webpack中實現HMR也很簡單，只需要做兩項配置

1. 在webpack設定檔中添加HMR外掛程式；
2. 在Webpack Dev Server中添加“hot”參數；

不過配置完這些後，JS模組其實還是不能自動熱載入的，還需要在你的JS模組中執行一個Webpack提供的API才能實現熱載入，雖然這個API不難使用，但是如果是React模組，使用我們已經熟悉的Babel可以更方便的實現功能熱載入。

...

 

webpack入門