接上一篇的內容繼續來說，背景篇的內容主要是介紹web前端工具的出現的原因和當前主要JavaScript模塊化編程的幾種規范！這篇內容主要介紹webpack的初級使用！
注意：目前webpack分為兩個版本：1.x 和2.x這兩個版的對應配置方式也是不一樣的，我目前只使用過1.X的版本。下面例子中所有配置的都是1.x的
這里先上一張webpack官方的圖
官方對於webpack的解釋：webpack is a module bundler(webpack就是一個模塊打包機)。它就是分析你當前項目的結構把項目中用的瀏覽器不能理解的東西（SCSS , jade, Typescript等），按照合適的方式打包並把它翻譯成瀏覽器可以理解的 css和js。在webpack中一切都是模塊(圖片、CSS也是)。
安裝
注意: 這里使用的環境為windows下！
webpack是依賴於Node.js的，這就是說，再安裝webpack之前，你的電腦上要先安裝Node.js(且版本不能低於0.6以上)，我們去官網上下載一個,一路next即可！
安裝好之后我們在CMD中輸入 node -v,來檢查一下當前的版本以及是否安裝成功：
C:\Users\zhang>node -v
v7.2.0
接下來，還要說一個東西就是npm(Node package manager)即Node的包管理工具。相當於VS中的Nuget(java中的maven),就是個管理當前項目依賴的東西。在很久以前node和npm是分開，要單獨安裝。現在的node.js已經把npm內置在程序里了！另外，如果完全沒有使用過npm的同學建議去看下這個文章（也就5分鍾的事），了解下常用命令，因為下面會用到。
在CMD中輸入 npm -v:
C:\Users\zhang>npm -v
3.10.9
對於中國網絡特殊情況，有些時候我們使用
npm安裝依賴包的時候，可能會比較慢，或者直接下載不了的情況。這個時候你可能需要個梯子，如果沒有梯子也不要緊。可以使用淘寶的NPM鏡像，有以上兩種情況建議去看下官網的使用說明。（也是幾分鍾的事情）。如果你安裝了cnpm命令，下面的操作中所有的npm命令都可以使用cnpm代替
做了這么多的准備工作，終於能安心的安裝webpack了。有以下的兩種方式：
# 全局安裝
npm install -g webpack
# 安裝webpack到你當前的項目（僅當前項目能使用）
npm install --save-dev webpack
我這里直接使用了全局安裝
使用
官方的教程是：一步步的的操作一個項目文件（沒有說整體的項目構成），來教我們一步步的使用。我看完后感覺有點亂亂，整體沒有什么結構感覺，很零散！所以我這里使用一個項目方式來使用感覺更為明確點。
使用npm init構建一個項目
npm init
輸入此命令后，在CMD窗體中會詢問你一些問題：當前項目的名稱、版本、描述、入口文件等等。不用擔心我們一路回車就好。
我這里的顯示如下：
D:\webpack\webpack-demo>npm init
.....
name: (webpack-demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\webpack\webpack-demo\package.json:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
D:\webpack\webpack-demo>
執行完上面的命令之后進行我們的項目目錄，會發現多了一個package.json文件。里面顯示的內容就是上面詢問我們的那此問題，是一個javascript對象的方式存儲。
package.json是對整個項目的描述,以及整個項目所依賴的包等信息。（類似於maven(java)中的pom.xml文件)，讓我們更方便的管理項目。
我們在當前的目錄新建一個src文件夾，之后在src里面新建entry.js和str.js兩個文件，在與package.json同級目錄下新建一個index.html文件。項目結構如下圖：
index.html文件只包含最基礎的html代碼，它的作用就是加載webpack打包之后的js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
str.js包含一個字符串變量。
var words = '你好，webpack';
module.exports = words;
entry.js 引用了str.js中的變量，並把值插入到頁面中。
words = require('./str.js');
document.getElementById("app").textContent = words;
使用webpack命令進行打包
命令格式如下(注：全局安裝下)：
webpack {目錄/要打包入口文件} {目錄/存放打包后文件命}
我執行的結果如下：
然后用瀏覽器打開index.html,結果如下：
至此，我們用webpack成功的打包了一個文件，完成了一個hellword的程序。但是，我們思考下，如果每次運行程序都在CMD輸入這么多的命令，非常的繁瑣，有沒有什么比較簡單的辦法呢？答案是肯定有的，使用配置文件的方式。
使用配置文件來實現webpack的打包
官方是這樣說的：隨着項目的發展你的項目配置會越來越復雜，使用命令操作的方式會越發笨重，所以我們需要一個配置文件來代替！
在項目的根目錄下創建一個webpack.config.js文件，內容如下:
module.exports = {
entry : './src/entry.js',
output : {
path: __dirname,
filename: 'bundle.js'
}
}
說明：
webpack.config.js是一個符合CommonJS規范的模塊。另外上文中的__driname是node.js中的一個全局變量，代表當前執行腳本的根路徑。
現在我們只需要在CMD中輸入webpack就可以達到和上面一行命令一樣的效果了！
使用webpack中的Loaders
webpack本身僅僅支持JavaScript模塊，如果要使用其它的語言，比如：es2016、TypeScript、CoffeeScript等等，那么就需要使用loaders。
Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
loaders可以說是webpack中最讓人興奮的地方，僅僅需要簡單的配置就可以通過webpack把它轉換為現代瀏覽器能理解的JavaScript文件。
CSS
接着上面的例子繼續。在前端開發中CSS必定是不可缺少的，為我們的頁面穿上美麗的外衣。那么使用webpack進行開發該怎么使用呢？
先介紹一下關於Loaders的配置和安裝方式
安裝Loaders
在webpack中絕大多數的loaders都是以xxx-loader的方式命名，使用npm來安裝它們：
# 這種安裝方式是指在生產環境中也使用此Loader
npm install xxx-loader --save
# 這種方式僅僅在開發時，使用的loader
npm install xxx-loader --save-dev
安裝完成之后還要在webpack.config.js中進行配置才能使用，直接上代碼：
module.exports = {
entry : './src/entry.js',
output : {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
在webpack中使用
module關鍵字進行配置，其中loaders對應的是數組（loaders不止一個）。
test: 是一個正則表達式用來匹配要處理的文件類型（必要）loader: loader對應的名稱（必要）include/exclude: 手動添加必須處理文件（文件夾）或者屏蔽一些文件（文件夾）（可選）query: 為loader提供額外的設置選項（可選，查看對應loader對應的loader說明文檔就好）
例子
這里我使用兩個開發中常用的loaders。css-loader和 style-loader，他們的作用分別是：css-loader可以讓你使用 @import和 url(..)的方法實現 require()的功能。而style-loader可以所有打包后的樣式添加到頁面中二者組合在一起正好能實現把CSS打包到js腳本中的功能。
安裝
npm install css-loader style-loader --save-dev
執行完上面的命令之后在當前項目目錄下會多出一個
node_modules的文件夾，是用來存放當前項目所需的依賴。在package.json中會多出devDependencies這個對象，是說明當前項目安裝的依賴。
配置
module.exports = {
entry : './src/entry.js',
output : {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
在src文件夾下新建一個base.css文件，輸入以下內容。
* {margin:0; padding: 0;}
body {
font-family:"Microsoft YaHei", "WenQuanYi Micro Hei";
font-size: 14px;
line-height: 20px;
}
#app {
margin: 30px auto;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
text-shadow: 0 1px 0 #de533a;
background: #F49484;
}
在entry.js文件中進行修改，引入base.css
words = require('./str.js');
require('./base.css')
document.getElementById("app").textContent = words;
在CMD中執行webpack命令重新打包，之后再打開index.html結果如下：
在webpack還有很多的其它loaders，作用也各不相同，比如：Babel(一個把es2015轉換為現代瀏覽器能理解的對應js版本的loader)、還有css預處理loader Scss Loader、Less Loader、Stylus Loader等，這里送官方的loaders List，供大家找到適合自己項目的Loader。
插件（Plugins）
插件可以完成更多Loader不能完成的功能。主要是用來拓展WebPack的功能，主要在整個項目的構建過程中生效，執行相關的任務。
Loaders和Plugins是兩個完全不同的東西，Loaders主要是用來處理各種各樣的源文件（scss,less,jsx,jade） 一次處理一個，而Plugins並直接操作單個文件，但它對於整個項目的構建過程起作用。
同樣webpack的插件也非常的多，送上目前webpack內置的插件列表。
對於一個正式的項目開發完成之后，有以下的需求很正常：把打包后的Js文件進行壓縮減少服務器的壓力，還有在js文件中加上自己公司的版權聲明。
使用方法
要使用其一個插件首頁要使用npm進行安裝，然后在webpack.config.js中進行配置。使用關鍵字plugins添加一個該插件的實例。
上面兩個插件都是webpack內置的，所以我們直接配置即可
var webpack = require('webpack')
module.exports = {
entry : './src/entry.js',
output : {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by javaSwing'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
在CMD中運行webpack，結果如下：
我在運行的時候出現了一個情況就是雖然我使用的是全局安裝的情況，但是如果不在項目內安裝webpack依賴，程序會報錯：Error: Cannot find module 'webpack'。解決的辦法是在項目內再安裝一次依賴
npm install webpack --save-dev
結束語
到此，webpack的初級使用已經結束了，如果您能耐心看到這里，我想您應該明白了webpack的一些基本的使用。我也是半個多月前接觸到這個東西，寫下來一些自己對這個東西的理解，能幫助大家入門最好，更為細致的使用，仍需要大家的探索！
歡迎交流，共同進步！
參考資料：