webpack入門(譯)

本文由官方Tutorial Getting Started整理翻譯，由於該指南解決了我在上手webpack過程當中遇到的諸多問題。因此在這裏推薦給各位新手們~

 

WELCOME

　　這份指南始終圍繞一個簡單例子。經過學習本教程你能夠學到：

• 如何安裝webpack
• 如何使用webpack
• 如何使用loader
• 如何使用開發服務器

安裝WEBPACK

　　首先你須要安裝有node，而後執行

     npm install webpack -g 

這會使webpack命令生效

開始

　　咱們從一個空文件夾開始，首先建立如下文件

　　而後在該文件夾根目錄下執行如下命令：

 webpack ./entry.js bundle.js

　　這會編譯你的entry.js文件並生成bundle.js。假若成功，將有如下信息輸出：

 

 

　　用瀏覽器打開index.html，會出現It works.

再添加一個文件

　　接下來，咱們會添加一個新文件，並加入以下代碼。

 

　　再執行如下命令

webpack ./entry.js bundle.js

　　刷新瀏覽器，此時你會看到文字變爲"It works from content.js."

webpack會分析你入口文件對於其餘文件的依賴，這些文件（一般稱爲模塊）也會被包含在bundle.js中。

第一個LOADER

　　咱們但願爲咱們的應用添加css文件。webpack原生僅支持JavaScript，因此咱們須要css-loader來處理css文件，同時咱們也須要style-loader來應用這些樣式。

　　運行npm install css-loader style-loader來安裝這些loader（此處使用局部安裝而非全局安裝），這會在你的目錄下生成node_modules文件夾。

　　須要改動的文件以下：

　　image

　　再次編譯並刷新瀏覽器你會看到應用的背景變爲黃色。

綁定LOADER

　　咱們不但願老是敲下如此冗長的require("!style!css!./style.css");，因此咱們能夠綁定文件的擴展名以簡化寫法爲require("./style.css")。

 

　　執行如下的編譯命令：

webpack ./entry.js bundle.js --module-bind 'css=style!css'

　　你將看到一樣的結果。

配置文件

　　咱們能夠將配置選項寫入配置文件中。

　　此後，僅需執行：

webpack

　　來編譯

 

webpack命令總會嘗試載入當前目錄的webpack.config.js文件

更友好地輸出

　　隨着項目的增加，編譯過程可能會愈來愈長，因此咱們能夠展現一些進度條以及增長配色來實現更友好地輸出。咱們能夠經過如下命令達到目的：

　webpack --progress --colors

監聽模式

　　當咱們不但願在文件改動後手動執行編譯操做時

webpack --progress --colors --watch

開發服務器

　　提供開發服務器是很是好的一項服務，能夠替換python -m SimpleHTTPServer啓用HTTP靜態服務器

　　經過如下命令全局安裝

　npm install webpack-dev-server -g

　　啓動服務器

　webpack-dev-server --progress --colors

　　這會綁定一個小型express服務器到localhost:8080，來爲你的靜態資源及bundle（自動編譯）服務。經過訪問http://localhost:8080/webpack-dev-server/bundle，bundle每次重編譯後瀏覽器頁面都會自動更新。

 

 

文／anthozoan77（簡書做者） 原文連接：http://www.jianshu.com/p/1c4fd72b84e8