webpack 2,3版本的網站 ： https://webpack.js.org/
什么是WebPack，為什么要使用它？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什么特性
其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
如果實在要把二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。
開始使用Webpack
1.安裝
在安裝 Webpack 前，你本地環境需要支持node.js
全局安裝 npm install -g webpack
安裝到項目目錄 npm install --save-dev webpack
2.開始?
1.在終端中使用npm init命令可以自動創建這個package.json文件
2.安裝到項目目錄 npm install --save-dev webpack
3.創建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包后的js文件以及一個index.html文件）。在這里還需要創建三個文件，index.html 文件放在public文件夾中，兩個js文件（Greeter.js和main.js）放在app文件夾中，此時項目結構如下圖所示
index.html文件只有最基礎的html代碼，它唯一的目的就是加載打包后的js文件（bundle.js）
Greeter.js只包括一個用來返回包含問候信息的html元素的函數。
main.js用來把Greeter模塊返回的節點插入頁面。
正式使用Webpack
webpack可以在終端中使用，其最基礎的命令是
webpack 入口文件（例如 main.js）? 出口文件(例 bundle.js)
結果如下
通過配置文件來使用Webpack（另外一種方式）
Webpack擁有很多其它的比較高級的功能（比如說本文后面會介紹的loaders和plugins），這些功能其實都可以通過命令行模式實現，但是正如已經提到的，這樣不太方便且容易出錯的，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，可以把所有的與構建相關的信息放在里面。
還是繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js （文件名是固定的）的文件，并在其中進行最最簡單的配置，如下所示，它包含入口文件路徑和存放打包后文件的地方的路徑。
新建 webpack.config.js 配置文件
module.exports={
entry:"./src/main.js",//打包的入口
output:{
path:path.join(__dirname,'./dist/'),? //path必須是絕對路徑,用來配置資源打包的出口目錄
filename:"bundle.js",
//在打包結果中，webpack默認將內容的資源應用路徑是相對于bundle.js文件，就是
//注：這里用到的path.join（）指令是node的方法，使用的話需要var path=require('path')，先 引入 才可以使用
}
}
現在如果你需要打包文件只需要在終端里你運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會自動參考webpack.config.js文件中的配置選項打包你的項目，輸出結果如下
又學會了一種使用Webpack的方法，而且不用管那煩人的命令行參數了，有沒有感覺很爽。有沒有想過如果可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會不會更爽~，繼續看下文。
更快捷的執行打包任務
執行類似于node_modules/.bin/webpack這樣的命令其實是比較煩人且容易出錯的，不過值得慶幸的是npm可以引導任務執行，對其進行配置后可以使用簡單的npm start命令來代替這些繁瑣的命令。在package.json中對npm的腳本部分進行相關設置即可，設置方法如下。
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"build": "webpack" //配置的地方就是這里啦，運行指令可以直接寫npm run build
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
加載css步驟
文檔? https://webpack.js.org/guides/asset-management/#loading-css
1. npm install --save-dev style-loader css-loader
2.webpack.config.js
module: {
rules: [
{
test: /\.css$/,? //正則匹配css文件解析
use: [
'style-loader',
'css-loader'? //注意：這里必須style在前 ，css在后
]
}
]
}
};
Loading Images 圖片加載
文檔? https://webpack.js.org/guides/asset-management/#loading-images
1、加載
npm install --save-dev file-loader
2.配置 webpack.config.js
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
Webpack Sample Project
作者：zhangwang
鏈接：http://www.lxweimin.com/p/42e11515c10f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
