> 來源：[知乎](http://zhuanlan.zhihu.com/FrontendMagazine/20367175) > 作者：張軒 > 著作權歸作者所有。 Webpack最近很熱，我一開始是想翻譯一篇國外關于webpack的佳作，但是找來找去也沒有一篇讓我感覺到很滿意的，好多都是一步到位，滿屏幕都是React＋Webpack，官方文檔寫的不太好，好多點都沒有解釋的詳細，所以我參考了幾篇文章，寫一篇傻瓜式指南。本文適合第一次接觸webpack的朋友，如果是老鳥，就不用看了。這是系列的第一篇，主要講他最基本的用法。 ### 比較 如果你熟悉原來一系列的構建工具，grunt或者gulp之類的，這里有一篇webpack和他們比較的文章可以讀一讀。 [Webpack Compared](http://survivejs.com/webpack_react/webpack_compared/) ### 安裝 先裝好node和npm，因為webpack是一個基于node的項目。然后 ~~~ npm install -g webpack ~~~ ### 總覽 官網對webpack的定義是MODULE BUNDLER，他的目的就是把有依賴關系的各種文件打包成一系列的靜態資源。 請看下圖  webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。 這個配置文件主要分為三大塊 * entry 入口文件 讓webpack用哪個文件作為項目的入口 * output 出口 讓webpack把處理完成的文件放在哪里 * module 模塊 要用什么不同的模塊來處理各種類型的文件 下面我們就一步一步來新建一個簡單的項目 ### 建立項目 建一個文件夾，然后新建一個package.json的文件在項目根目錄下 ~~~ mkdir webpack cd webpack npm init # 一直點回車 如果懶得填一些信息 ~~~ 如果你使用git管理你的這個項目的話，建議你新建一個.gitignore文件，不要讓git提交一些node依賴的模塊， 你也可以參考github的例子 [gitignore/Node.gitignore at master · github/gitignore · GitHub](https://github.com/github/gitignore/blob/master/Node.gitignore) 我們這里就簡單一點 ~~~ node_modules ~~~ ### 項目結構 現在項目里面就有一個package.json， 我們多加一點東西，慢慢豐富它的內容。 * /app * index.js * sub.js * package.json * webpack.config.js 添加了兩個js文件，添加了最重要的webpack的配置文件，我們還是從非常簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，如果你想使用ES6的風格，這點以后再提。 ### JS代碼 **sub.js** ~~~ //我們這里使用CommonJS的風格 function generateText() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world"; return element; } module.exports = generateText; ~~~ **index.js** ~~~ var sub = require('./sub'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello World</h1>'; app.appendChild(sub()); document.body.appendChild(app); ~~~ 代碼寫完了，完成一個很簡單的功能，新建一個單獨的module，并且在另外一個module里面引用他，最后會在頁面里面輸出兩個標題。 ### 配置Webpack 現在開始配置webpack，目標是把這兩個js文件合并成一個文件. 我們可以自己在build文件夾里面手動建一個index.html文件夾，然后再把合并以后的js引用在里面，但是這樣有些麻煩，所以我們這里安裝一個plugin，可以自動快速的幫我們生成HTML。 ~~~ npm install html-webpack-plugin --save-dev ~~~ 好 有了這個插件 開始寫config文件 ~~~ var path = require('path'); var HtmlwebpackPlugin = require('html-webpack-plugin'); //定義了一些文件夾的路徑 var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { //項目的文件夾 可以直接用文件夾名稱 默認會找index.js 也可以確定是哪個文件名字 entry: APP_PATH, //輸出的文件名 合并以后的js會命名為bundle.js output: { path: BUILD_PATH, filename: 'bundle.js' }, //添加我們的插件 會自動生成一個html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] }; ~~~ 然后在項目根目錄運行 ~~~ webpack ~~~ 終端顯示一堆信息，然后告訴你成功了。 > 你可以使用webpack --help看看一些運行的時候可選的參數 你會發現多出來一個build文件夾，直接點開里面的html文件，你會發現我們可愛的“hello world”已經插入到頁面了。我們的任務完成了，成功生成html，合并js，html引入了js，js被執行了。 ### 配置webpack-dev-server 上面任務雖然完成了，但是我們要不斷運行程序然后查看頁面，所以最好新建一個開發服務器，可以serve我們pack以后的代碼，并且當代碼更新的時候自動刷新瀏覽器。 安裝webpack-dev-server ~~~ npm install webpack-dev-server --save-dev ~~~ 安裝完畢后 在config中添加配置 ~~~ module.exports = { .... devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... } ~~~ 然后再package.json里面配置一下運行的命令,npm支持自定義一些命令 ~~~ ... "scripts": { "start": "webpack-dev-server --hot --inline" }, ... ~~~ 好了，萬事具備了，在項目根目錄下輸入npm start,一堆花花綠綠的信息后server已經起來了，在瀏覽器里面輸入[http://localhost:8080](http://localhost:8080) 發現偉大的hello world出現了，在js里面隨便修改一些輸出然后保存, boom!瀏覽器自動刷新，新的結果出現了。 > 拓展閱讀 如果你的服務器端使用的是express框架，你還可以直接安裝express的middleware，webpack配合express，很好用。 > > > > ~~~ > npm install webpack-dev-middleware --save-dev > ~~~ > > 更多的詳情 請參考這篇文章 [Using React with Webpack Tutorial](https://blog.risingstack.com/using-react-with-webpack-tutorial/) ### 添加CSS樣式 現在來添加一些樣式，webpack使用loader的方式來處理各種各樣的資源，比如說樣式文件，我們需要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件，找到所有的url(...)并且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中。 安裝我們的loader ~~~ npm install css-loader style-loader --save-dev ~~~ 配置loader，在webpack.config.js中 ~~~ devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... module: { loaders: [ { test: /\.css$/, loaders: ['style', 'css'], include: APP_PATH } ] }, ... plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] ~~~ 看loaders的書寫方式，test里面包含一個正則，包含需要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這里我們用了css和style，注意loaders的處理順序是從右到左的，這里就是先運行css-loader然后是style-loader. 新建一個樣式文件 main.css ~~~ h1 { color: red; } ~~~ 記得在入口文件index.js中引用 ~~~ require('./main.css'); ~~~ 然后發現標題變成紅色的了，webpack的理念是基于項目處理的，把對應的文件格式給對應的loader處理，然后你就不用管了，它會決定怎么壓縮，編譯。 那現在想使用一些有愛的css預編譯程序，來點sass吧。 你可能已經想到了，再來個loader就行啦，確實是這樣簡單。 ~~~ npm install sass-loader --save-dev ~~~ 稍微修改一下config，刪掉我們先前添加的css規則，加上下面的loader ~~~ { test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: APP_PATH }, ~~~ 添加兩個sass文件，variables.scss和main.scss variables.scss ~~~ $red: red; ~~~ main.scss ~~~ @import "./variables.scss"; h1 { color: $red; } ~~~ 在index.js中引用 ~~~ require('./main.scss'); ~~~ 然后發現標題如愿變紅，相當簡單吧。 ### 處理圖片和其他靜態文件 這個和其他一樣，也許你也已經會玩了。安裝loader，處理文件。諸如圖片，字體等等，不過有個神奇的地方它可以根據你的需求將一些圖片自動轉成base64編碼的，為你減輕很多的網絡請求。 安裝url-loader ~~~ npm install url-loader --save-dev ~~~ 配置config文件 ~~~ { test: /\.(png|jpg)$/, loader: 'url?limit=40000' } ~~~ 注意后面那個limit的參數，當你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片。 下面舉個栗子。 新建一個imgs文件夾，往里面添加一張崔叔的照片。在scss文件中添加如下的東西。 ~~~ @import "./variables.scss"; h1 { color: $red; background: url('./imgs/avatar.jpg'); } ~~~ npm start, 然后查看圖片的url，發現神奇。  ## 添加第三方庫 有的時候還想來點jquery，moment，undersocre之類的庫，webpack可以非常容易的做到這一點，有謠言說Bower即將停止開發了, 作者推薦都使用npm來管理依賴。那么我們現在安裝在我們的app中添加jquery和moment的支持。 ~~~ npm install jquery moment --save-dev ~~~ 在js中引用 ~~~ var sub = require('./sub'); var $ = require('jquery'); var moment = require('moment'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello World it</h1>'; document.body.appendChild(app); app.appendChild(sub()); $('body').append('<p>look at me! now is ' + moment().format() + '</p>'); ~~~ 看看瀏覽器，成功！ jquery和moment現在都起作用了！ ### 添加ES6的支持 如果現在你的項目還沒有對ES6的語法支持，那就有點沒有逼格了，其實大家都知道這個也很簡單，因為我們有偉大的[Babel](https://babeljs.io/) 首先 裝各種loader ~~~ npm install babel-loader babel-preset-es2015 --save-dev ~~~ 配置我們的config文件 ~~~ ... { test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { presets: ['es2015'] } }, ... ~~~ es2015這個參數是babel的plugin，可以支持各種最新的es6的特性，具體的情況看這個鏈接。 [Babel es2015 plugin](http://babeljs.io/docs/plugins/preset-es2015/) 現在我們可以改掉CommonJS風格的文件了。 **sub.js** ~~~ export default function() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world hahaha"; return element; } ~~~ **index.js** ~~~ import './main.scss'; import generateText from './sub'; import $ from 'jquery'; import moment from 'moment'; let app = document.createElement('div'); const myPromise = Promise.resolve(42); myPromise.then((number) => { $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>'); }); app.innerHTML = '<h1>Hello World it</h1>'; document.body.appendChild(app); app.appendChild(generateText()); ~~~ 我們上面測試了import, export，const，let，promise等一系列es6的特性。 最后完美的輸出界面。  ### 結語 第一部分到這里結束，經過一系列例子，你應該能夠了解webpack最基本的用法了吧。是否已經喜歡上這種簡潔的配置了？下一部分我們會繼續討論一些webpack更高級的用法。 ### 參考文章 > [SurviveJS - Table of Contents](http://survivejs.com/webpack_react/) > > [Introduction](https://christianalfoni.github.io/react-webpack-cookbook/index.html) ### 很硬的鏈接 把這一節的代碼做了一個repo，想看所有源碼的可以clone下 [vikingmute/webpack-basic-starter · GitHub](https://github.com/vikingmute/webpack-basic-starter) 同時這一系列關于Webpack的文章也可以在github找到 [vikingmute/webpack-for-fools · GitHub](https://github.com/vikingmute/webpack-for-fools)