webpack學習（一）—— 入門

，咱們一般採用的是組件化開發方式，這樣就會對應有不少個js文件，而打包工具的出現則是爲了正確處理這些js文件的依賴關係，並生成一個最終的文件，這樣，咱們最後只須要加載打包之後的文件就能夠了，而無須加載許多單個的js文件。接下來咱們就試下多個js文件的打包。

新建一個content.js文件，文件內容以下：

document.write('this is the content from content.js')

將entry.js文件修改以下：

document.write(require('./content.js')); 

打包，執行 webpack ./entry.js bundle.js;
刷新index.html頁面，能夠看到此時其內容已變成this is the content from content.js。

$ webpack ./entry.js bundle.js Hash: 41ba4af12b1844d7deaf Version: webpack 1.13.3 Time: 45ms Asset Size Chunks Chunk Names bundle.js 1.55 kB 0 [emitted] main [0] ./entry.js 40 bytes {0} [built] [1] ./content.js 44 bytes {0} [built] 

能夠看到，webpack以entry.js文件爲入口，而entry.js文件又依賴了content.js，這時webpack就會去加載content.js,最後生成bundle.js。

使用loader

上面的例子中能夠看到webpack能夠對js文件進行很好的處理，然而咱們的項目中一般須要用到一些css文件對樣式進行調整。那如何使用webpack對樣式文件打包呢，就須要使用loader。
咱們首先須要將css文件以js模塊的方式加載進來，而後將這些樣式應用到dom上。這兩個過程對應兩個加載器：css-loader和style-loader。這兩個模塊能夠經過npm進行安裝，注意安裝到當前目錄便可，不要加-g。

$ npm install css-loader style-loader

這個命令會在當前目錄下建立一個node_modules文件夾，該文件夾包括咱們用到的包，css-loader和style-loader。

舉例：
step1: 新建一個css文件，style.css

body { background: yellow; }

step2: 修改entry.js以下：

require('!style!css!./style.css'); document.write(require('./content.js'));

step3: 打包

$ webpack ./entry.js bundle.js

刷新頁面，能夠看到背景變爲黃色。

!style!css!./style.css指對style.css文件先使用css-loader進行處理，再經過style-loader進行處理。其中css-loader將css文件進行處理，使其能夠做爲一個js modules被處理；style-loader則解析當前的樣式，並應用到dom上。查看生成的bundle.js能夠看到以下代碼：

function addStylesToDom(styles, options) { for(var i = 0; i < styles.length; i++) { var item = styles[i]; var domStyle = stylesInDom[item.id]; if(domStyle) { domStyle.refs++; for(var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]); } for(; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j], options)); } } else { var parts = []; for(var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j], options)); } stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts}; } } } ... function createStyleElement(options) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; insertStyleElement(options, styleElement); return styleElement; } 

以上步驟略顯繁雜，每次打包須要指定入口文件和生成文件，且在使用加載器時也須要手動配置，很不方便。爲了解決這個問題，咱們可使用配置文件來解決，即本文的第四部分。

webpack.config.js

這個文件設定了打包的配置，webpack會自動根據該文件來打包。一個基本的配置文件以下所示：

module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };

這裏指定了三個參數，包括entry,output,module，分別對應了入口文件entry.js,打包生成的文件bundle.js,以及模塊加載器。有了配置文件，則能夠直接打包：

$ webpack

webpack還支持實時監測文件的變化，並在頁面中體現出來，無須每次修改文件都從新編譯。只須要在打包的時候設置爲watch模式便可。

$ webpack --watch

dev server

webpack還爲咱們提供了webpack-dev-server,它是一個小型的基於node的express服務器。利用webpack-dev-server咱們能夠輕鬆地啓動服務。且webpack-dev-server默認採用的是watch模式，也就是說它會自動監測文件的變化，並在頁面作出實時更新，咱們不須要每次都從新編譯。

安裝webpack-dev-server

爲了方便在命令行中使用，一樣全局安裝。

$ npm install webpack-dev-server -g

啓動

$ webpack-dev-server

默認爲8080端口。
在瀏覽器中打開http://localhost:8080/webpack... ，能夠看到index.html頁面。
修改content.js文件的內容，好比將內容修改成this is another content，保存文件，能夠看到index.html頁面自動刷新了。

以上內容對webpack的安裝和基本的使用方法作了介紹。後續我還會更深刻地去學習，並將學習過程當中的知識點記錄下來，但願能和你們一同窗習進步。

（本文完）