webpack是前端開發中比較常用的打包工具之一，另外還有gulp，grunt。之前沒有涉及過打包這塊，這里介紹一下使用webpack打包的流程。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
下面我們新建一個項目來詳細描述一下使用webpack打包項目的過程：
1.安裝好npm，這個不再復述，然后在一個目錄下執行 npm init，這樣就會初始化一個項目包，里面就有了一個package.json的文件，這個文件想必大家都有所了解
2.然后安裝一下webpack，既然我們想打包，就要把webpack這個工具安裝好，安裝方式有兩種，一個是全局安裝一個是安裝在項目中，在項目的package.json目錄下執行的命令分別是npm install -g webpack 和 npm install --save-dev webpack，在這里我們安裝在項目里面，使用第二種安裝方式
3.安裝完成之后我們能看到項目目錄下有一個node_module的文件夾，然后我們就可以寫自己的項目了，我們首先建立一個app和public的文件夾，在app中新建兩個文件，分別是test.js和main.js，在pulic中新建一個index.html文件，這樣我們的基本項目雛形就產生了
4.我們在index.html中寫入一下片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
5.我們在test.js中寫入這樣一個除了方法：
//test.js
module.exports = function() {
var test= document.createElement('div');
test.textContent = "Hi there and testing!";
return test;
};
6.我們在main.js中把test.js的方法導入進來：
//main.js
var test= require('./test.js');
document.getElementById('root').appendChild(test());
7.下面我們就可以使用webpack工具進行打包了，在項目的根目錄，也就是包含node_module的目錄下執行下面這個命令node_modules/.bin/webpack app/main.js public/bundle.js，這條命令的是使用webpack把打包后的文件命名為bundle.js放在public文件夾下，其中app/main,js是項目的入口。我們能看到終端上會打印出包含這樣的log
8.這就說明我們的打包工作完成了，然后我們打開index.html文件就能看到我們輸入的內容：Hi there and testing!
9.這樣要配置項目入口，又要配置輸出文件名之類的東西，在命令行輸入比較麻煩，我們可以使用文件配置的方式，在項目的根目錄中新建一個webpack.congfig.js的文件，把下面這些內容寫入進去
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后輸出文件的文件名
}
}
這樣我們就可以直接使用node_modules/.bin/webpack直接進行打包操作了
10.如果我們不想使用node_modules/.bin/webpack這樣的命令，習慣使用npm xxx之類的，我們在我們的package.json中設置一下啟動命令即可：
"scripts": {
"webpack": "webpack" //配置的地方就是這里啦
}
然后我們直接執行npm run webpack同樣可以執行打包任務
11.接下來我們介紹，如何直接引入json類型的文件，這里我們使用loaders模塊，先說一下應用場景吧。我們現在有一個json文件，我們想把它導入到模塊中，然后讀取里面的信息，下面我們的文件目錄是這樣的：
12.如果我們想在任意一個模塊，如test.js或者main.js中導入這個json文件，比如，我們的test.json文件中有這樣一個內容
//test.json
{
"Test": "Hi there and geetings from JSON!"
}
我們想在test.js使用這樣Test字段
var test = require('./test.json');
module.exports = function() {
var geet = document.createElement('div');
geet.textContent = test.greetText;
return geet;
};
我們就要引入json-loader，具體的辦法是：在根目錄下執行
//安裝可以裝換JSON的loader
npm install --save-dev json-loader
然后把我們的webpack.config.js配置成下面這樣
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
use: "json-loader"
}
]
}
}
最后我們執行一下npm run webpack，打包完成，打開index.html頁面就會顯示test.json里面的Hi there and geetings from JSON!這個內容
13.如果我們想把css樣式也一起打包，就npm install --save-dev style-loader css-loader，然后在webpack.config.js進行相應的配置就行了，這樣是把js和css打包成一個文件，也可以把他們分開打包