webpackt入門1：webpack介紹&webpack安裝&使用webpack打包
本篇博客不是原創，簡書的zhangwang寫的，原文太長，我這裏只是提取了一部分。
原文地址：入門webpack，看這篇就夠了
一、Webpack解決了什麽問題
問題1.JavaScript這個腳本化語言在互聯網的前端大行其道，但其一直被當作玩具語言，與Java、C#等後端語言相比，除了語法混亂、寫法隨意之外，無法模塊化也是被詬病的一點。CommonJS標準中提出了模塊化標準，而模塊化標準帶來的一個新的問題——項目文件增多，依賴復雜。如果工具能幫助我們自動分析文件的依賴關系，那感情是最好的。
問題2.ECMAScript有很多實現，JavaScript、TypeScript、CoffeeScript等，如果TypeScript這樣的語言能轉換成JavaScript
問題3.同理，Scss、Less這些CSS的預處理器，如果能使用Scss開發，並轉換成CSS，那感情是最好的。
問題4.還有很多問題。。。。。。。
Webpack能幫你處理上面這些問題，簡而言之：Webpack幫助你分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
二、webpack工作方式
把你的項目當做一個整體，通過一個給定的主文件（如：index.js），從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript文件。
三、webpack安裝
1.新建一個文件夾進行測試，如test
2.執行命令
$ npm install webpack -g //全局安裝
$ npm install webpack -save-dev //本項目安裝
3.查看webpack版本
四、打包方法1：使用命令行來打包
1.新建文件夾hellopack2
2.初始化項目：在項目的根目錄下使用npm init命令，根據提示輸入一系列的信息，會生成一個package.json文件
3.生成依賴：在項目的根目錄下使用npm install命令，會生成node_modules文件夾，裏面是各種依賴的包
4.建立如下的文件結構
5.輸入相應的內容
//index.html,腳本引用了bundle.js，我們的webpack最終就是要生成這個文件 <!DOCTYPE html> <html> <head> <title>hellowebpack2</title> </head> <body> <div id=‘root‘> </div> <script src="bundle.js"></script> </body> </html>
//main.js var greet=require(‘./greet‘) document.querySelector("#root").appendChild(greet()); document.querySelector("#root").append(‘Hi there and greetings!‘);
//greet.js module.exports = function(){ var greet = document.createElement(‘div‘); greet.textContent = "Hi there and greetings!"; return greet; };
6.命令行打包
項目根目錄下執行命令：
7.瀏覽器查看index.html
命令說明：
（1）.webpack在打包的時候需要指定一個入口文件，前面說過了：webpack就是通過這個文件來作為依賴的入口，進而分析整個項目，本示例是main.js。
（2）.webpack需要將打包的最終結果輸出到一個文件中，這個文件的名稱可以自定義，本示例是bundle.js。
五、打包方法2：使用配置文件來打包
如果長期使用$webpack app/main.js pulic/bundle.js來進行打包，不方便且易出錯，我們可以將入口文件和輸出文件放入配置文件中。
webpack的默認配置文件是webpack.config.js，在項目的根目錄下新建這個文件，並放入如下內容：
直接使用命令webpack就可以，如下所示：
在瀏覽器打開index.html同樣能看到效果。
六、打包方法3：使用npm的自定義命令來打包
npm可以通過scripts節點來支持自定義命令，我們可以將webpack這個命令放入npm的配置文件package.json，這樣以後，我們可以使用自定義的命令來打包了。
以後輸入$npm start就相當於輸入了$ webpack。
當然，我們也可以不需要第五點webpack.config.js，可以直接將webpack app/main.js public/bundle.js都放入test的scripts內容中，如下所示：
使用同樣的命令，也可以達到效果。
參考文檔
http://www.jianshu.com/p/42e11515c10f
http://webpack.github.io/
webpackt入門1：webpack介紹&webpack安裝&使用webpack打包