安裝
EDIT DOCUMENT
本指南介紹了安裝 webpack 的各種方法桑孩。
前提條件
在開始之前，請確保安裝了Node.js的最新版本框冀。使用 Node.js 最新的長期支持版本(LTS - Long Term Support)流椒，是理想的起步。使用舊版本明也，你可能遇到各種問題宣虾，因?yàn)樗鼈兛赡苋鄙?webpack 功能以及/或者缺少相關(guān) package 包。
本地安裝
最新的webpack版本是：
要安裝最新版本或特定版本温数，請運(yùn)行以下命令之一：
npminstall--save-dev
webpacknpminstall--save-dev webpack@
全局安裝
以下的 NPM 安裝方式绣硝，將使webpack在全局環(huán)境下可用：
npminstall--global webpack
正式使用Webpack
webpack可以在終端中使用，在基本的使用方法如下：
# {extry file}出填寫入口文件的路徑撑刺，本文中就是上述main.js的路徑鹉胖，# {destination for bundled file}處填寫打包文件的存放路徑# 填寫路徑的時(shí)候不用添加{}webpack {entry file} {destinationforbundled file}
指定入口文件后，webpack將自動(dòng)識(shí)別項(xiàng)目所依賴的其它文件够傍，不過需要注意的是如果你的webpack不是全局安裝的甫菠，那么當(dāng)你在終端中使用此命令時(shí)，需要額外指定其在node_modules中的地址冕屯，繼續(xù)上面的例子寂诱，在終端中輸入如下命令
# webpack非全局安裝的情況node_modules/.bin/webpack app/main.js public/bundle.js
通過配置文件來使用Webpack
Webpack擁有很多其它的比較高級(jí)的功能（比如說本文后面會(huì)介紹的loaders和plugins），這些功能其實(shí)都可以通過命令行模式實(shí)現(xiàn)安聘，但是正如前面提到的刹衫，這樣不太方便且容易出錯(cuò)的醋寝，更好的辦法是定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡單的JavaScript模塊带迟，我們可以把所有的與打包相關(guān)的信息放在里面音羞。
繼續(xù)上面的例子來說明如何寫這個(gè)配置文件，在當(dāng)前練習(xí)文件夾的根目錄下新建一個(gè)名為webpack.config.js的文件仓犬，我們在其中寫入如下所示的簡單配置代碼嗅绰，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑。
module.exports = {entry:? __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/public",//打包后的文件存放的地方filename:"bundle.js"http://打包后輸出文件的文件名}}
注：“__dirname”是node.js中的一個(gè)全局變量搀继，它指向當(dāng)前執(zhí)行腳本所在的目錄窘面。
有了這個(gè)配置之后，再打包文件叽躯，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了财边，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)
只有通過合適的loaders，它們都可以被當(dāng)做模塊被處理点骑。
webpack提供兩個(gè)工具處理樣式表酣难，css-loader和style-loader，二者處理的任務(wù)不同黑滴，css-loader使你能夠使用類似@import和url(...)的方法實(shí)現(xiàn)require()的功能,style-loader將所有的計(jì)算后的樣式加入頁面中憨募，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
需要分別安裝 npm . install--save-dev style-loader css-loader
