剛開始接觸webpack，完全是工作需求。那是去年年末的事情了，當時被迫換到另一個項目組，也是一個新的項目，做手機上面的應用，客戶要求用react做應用，是以完全屬于趕鴨子上架，當時說真的蠻懵逼的，也就是從那個時候開始接觸node，webpack，react。
我現在終于有時間重新看待重新學習和總結webpack，直到前兩天看到一篇文章，我才如夢初醒，附送連結位址：http://www.jianshu.com/p/42e11515c10f。寫這篇文章的樓主是去年寫的文章，我前兩天才開始慢慢看，真是慚愧。在這裡，由衷感謝分享自己學習心得的樓主，讓我對webpack有了比較完整的認識。
webpack，最開始我用搜尋引擎去搜，看到的最直接的詞彙，就是“打包”，就是把所有不同的檔案子產品，通過webpack這個東西進行子產品化的打包，把浏覽器不能識别的語言解析成浏覽器能夠識别的語言。
作為逗渣的我，實在上升不了多高的高度，是以本文章完全是講webpack的使用以及一些小點的釋疑。本文的操作，完全在node環境下，是以前提是node的環境已經配置好。
首先，建立一個空的檔案夾，我命名為new-webpack，當然小夥伴們可以命名為其他名稱，請自便。
用windows鍵+R打開電腦運作指令的視窗，也就是終端。
點選“确定”，顯示如下：
我的new-webpack檔案夾是放在D盤下的myspace中，是以我們接下來就通過指令行進入：
大家也看到，我們剛開始打開終端，預設的路徑是C槽下的管理者目錄，我們通過輸入“D:”切換到D盤，那麼怎麼找到new-webpack的路徑呢？
對，通過這樣，cd在終端裡是切換的意思，是以我們輸入“cd D:\myspace\new-webpack”，就進入我們new-webpack檔案夾了。
在new-webpack檔案夾中，我們建立一個package.json的檔案，這是一個标準的npm說明檔案，裡面包含很多資訊，栗如項目名稱，版本，描述，項目入口，依賴關系等等。在終端裡我們輸入"npm init"指令就可以自動建立package.json檔案，輸入指令後，終端會詢問一系列問題，比如項目名稱，版本，描述，作者等，我們隻要一路回車就好，這些問題答案都不是那麼重要。
npm init 打開package.json，可以看到以下資訊：
接下來進入正題。首先我們要安裝webpack，通過以下兩種方式進行安裝，“-g”是全局安裝的意思，“--save-dev”是安裝到你目前的項目目錄裡。
//全局安裝
npm install webpack -g //安裝到你的項目目錄
npm install webpack --save-dev 我是安裝webpack2.2.1版本，因為某些客觀的原因，不能安裝新版本，~~~~(>_<)~~~~安裝完的結果如下：
全局安裝完之後，接下來給本項目安裝webpack依賴關系，如下：
// 安裝Webpack
npm install --save-dev webpack 然後我們在package.json裡面可以看到：
在我們的new-webpack也能看到，node-modules子產品也生成了：
回到之前的空檔案夾，并在裡面建立兩個檔案夾,app檔案夾和public檔案夾，app檔案夾用來存放原始資料和我們将寫的JavaScript子產品，public檔案夾用來存放準備給浏覽器讀取的資料（包括使用webpack生成的打包後的js檔案以及一個index.html檔案）。在這裡還需要建立三個檔案，index.html 檔案放在public檔案夾中，兩個js檔案（Greeter.js和main.js）放在app檔案夾中，此時項目結構如下圖所示
index.html檔案隻有最基礎的html代碼，它唯一的目的就是加載打包後的js檔案（bundle.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html> Greeter.js隻包括一個用來傳回包含問候資訊的html元素的函數。
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
}; main.js用來把Greeter子產品傳回的節點插入頁面。
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter()); 在目前練習檔案夾的根目錄下建立一個名為webpack.config.js的檔案，并在其中進行最最簡單的配置，如下所示，它包含入口檔案路徑和存放打包後檔案的地方的路徑。
module.exports = {
entry: __dirname + "/app/main.js",//入口檔案
output: {
path: __dirname + "/public",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔案名
}
} 注：“__dirname”是node.js中的一個全局變量，它指向目前執行腳本所在的目錄。
然後在終端輸入指令：webpack
顯示如下：
打包成功，并且在public的檔案夾下面生成了bundle.js檔案。然後我們用浏覽器打開index.html，就能看到結果了。
Loaders是webpack中最讓人激動人心的功能之一了。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的檔案進行處理，比如說分析JSON檔案并把它轉換為JavaScript檔案，或者說把下一代的JS檔案（ES6，ES7)轉換為現代浏覽器可以識别的JS檔案。或者說對React的開發而言，合适的Loaders可以把React的JSX檔案轉換為JS檔案。
Loaders需要單獨安裝并且需要在webpack.config.js下的
modules
關鍵字下進行配置，Loaders的配置選項包括以下幾方面：
-
test
-
loader
-
include/exclude
-
query
繼續上面的例子，我們把Greeter.js裡的問候消息放在一個單獨的JSON檔案裡,并通過合适的配置使Greeter.js可以讀取該JSON檔案的值，配置方法如下，在終端繼續安裝json-loader
//安裝可以裝換JSON的loader
npm install json-loader --save-dev 然後我們在webpack.config.js中配置JSON loader
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
}
} 我們在app檔案夾下面建立config.json檔案，内容如下：
{
"greetText": "Hi there and greetings from JSON!"
} 注：json檔案不要含有注釋内容，否則會造成打包不成功，報錯。。。
更新Greeter.js
var config = require('./config.json');
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config.greetText;
return greet;
}; 繼續在終端輸入webpack指令打包，終端結果顯示：
浏覽器結果顯示：
Loaders很好，不過有的Loaders使用起來比較複雜，比如說Babel。
Babel
Babel其實是一個編譯JavaScript的平台，它的強大之處表現在可以通過編譯幫你達到以下目的：
- 下一代的JavaScript标準（ES6，ES7），這些标準目前并未被目前的浏覽器完全的支援；
- 使用基于JavaScript進行了拓展的語言，比如React的JSX
Babel的安裝與配置
Babel其實是幾個子產品化的包，其核心功能位于稱為
babel-core
的npm包中，不過webpack把它們整合在一起使用，但是對于每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
我們先來一次性安裝這些依賴包
// npm一次性安裝多個依賴子產品，子產品之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react 在webpack中配置Babel的方法如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders裡進行配置即可
query: {
presets: ['es2015','react']
}
}
]
}
} 現在你的webpack的配置已經允許你使用ES6以及JSX的文法了。繼續用上面的例子進行測試，不過這次我們會使用React，記得先安裝 React 和 React-DOM
npm install --save react react-dom 使用ES6的文法，更新Greeter.js并傳回一個React元件
import React, {Component} from 'react'
import config from './config.json';
class Greeter extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
}
export default Greeter 使用ES6的子產品定義和渲染Greeter子產品
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
render(<Greeter />, document.getElementById('root')); 繼續webpack打包，然後結果我們也能看到。
這中間有很多我的廢話，也有很多http://www.jianshu.com/p/42e11515c10f這篇文章的知識點，鑒于我國文不好，實在說不了樓主的精辟語言，是以重點知識點都是照搬樓主的，大家可以去看這篇文章。我的介紹就到這裡，樓主那篇文章還有其他知識點可以學習，歡迎大家去看那篇文章，那篇文章打開了我認識webpack的大門，非常棒的一篇文章。
參考資料：簡書
http://www.jianshu.com/p/42e11515c10f
轉載于:https://www.cnblogs.com/winteronlyme/p/6877347.html