這些天在項目之余的時間學習了webpack打包項目的東西，非常榮幸的找到一些大神的文章來學習，死勁嚼了幾天，終於略知一二。在以后的工作上還需繼續學習，下面我將分享我這幾天學到的一點東西，希望能讓我一個還不算入門webpack的小白領大家入門。本文主要還是摘抄大神的文章加上自己手動的一些過程記錄，不喜勿噴，謝謝！開車了！！！開車了！！！
一、什么是Webpack
webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載。
webpack的工作原理：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
二、webpack的使用
1、新建項目目錄
我們可以先把相關的，基本文件及目錄新建好，然后進入到項目中：
2、項目初始化
webpack安裝完成后，我們緊接着輸入命令來初始化項目，初始化命令：npm init; 在初始化的過程中，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不准備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可，這時候項目中會多一個配置文件
這時候，目錄中會生成一個package.json文件，這是一個標准的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。
接着我們開始安裝相關的依賴: npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install vue --save。這時候在package.json文件中我們可以看到已安裝相關的依賴包。
安裝完依賴，我們對相應的文件進行編輯：
index.html文件 main.js文件 App.vue文件
在項目目錄下新建 build 目錄，用來存放我們的構建相關的代碼文件等，然后在build目錄下新建 webpack.config.js 這是我們的webpack配置文件，webpack需要通過讀取你的配置，進行相應的操作。
上例中，相信你已經看懂了我的配置，入口文件是main.js文件，配置了相應輸出，然后使用 vue-loader 去加載 .vue 結尾的文件，接下來我們就可以構建項目了，我們可以在命令行中執行：
webpack --display-modules --display-chunks --config build/webpack.config.js
這是可能會拋出一個錯誤：這時我們需要再安裝這個依賴，npm install vue-template-compiler --save-dev, 然后重新跑上面的命令，這是打包就成功了，並且在根目錄中多了一個 dist/static目錄（里面有一個我們打包輸出的js文件）
這時候運行：webpack --display-modules --display-chunks --config build/webpack.config.js，恭喜你，你的項目已經簡單的配好了打包，可以正常運行了。
3、webpack插件的使用
首先安裝 html-webpack-plugin 插件：npm install html-webpack-plugin --save-dev
這時候我們的webpack.config.js文件要做修改，如下：
執行命令：webpack --display-modules --display-chunks --config build/webpack.config.js，這時候我們輸出的目錄會多出一個index.html文件，並且在瀏覽器中可以正常運行該文件：
4、中間件的使用
一、webpack-dev-middleware
安裝需要的中間件依賴包：npm install webpack-dev-middleware webpack-hot-middleware --save-dev
使用中間件的目的是為了提高開發效率，提供熱加載。另外還需安裝express，這是一個nodejs框架，安裝命令：npm install express --save-dev
裝完依賴之后，我們需要在build目錄下新建一個dev-server.js文件，並編輯相應內容：
這時候我們可以運行服務，並且監聽localhost: 8866，很開心，你會發現你的服務成功的啟動了，是不是感覺要擺上幾圍慶祝慶祝一下！
然而，你別高興太早，當你在瀏覽器運行localhost:8866時，你會發現頁面並沒有出來，並且還報一個404的錯誤，恭喜你，你可以沮喪一會了！
不要着急，咱們現在來解決這個問題，我們得在webpack.config.js文件里面做一點修改，如下：
1、將 config.output.publicPath 修改為 ‘/‘;
2、將 plugins 中 HtmlWebpackPlugin 中的 filename 修改為 ‘index.html’;
3、重啟服務
啟動服務成功！！！
但是這樣開發模式下的確是成功了，可是我們直接修改了 webpack.config.js 文件，這就意味着當我們執行 構建命令 的時候，配置變了，那么我們的構建也跟着變了，所以，一個好的方式是，不去修改webpack.config.js文件，我們在build目錄下新建一個 webpack.dev.conf.js文件，意思是開發模式下要讀取的配置文件，並寫入一下內容：
並且我們的dev-server.js文件要做相應的修改，將原來的：var config = require('./webpack.config') 改為 var config = require('./webpack.dev.config')，然后重啟服務，同樣是可以啟動成功！
二、webpack-hot-middleware
webpack-hot-middleware 只配合 webpack-dev-middleware 使用，它能給你提供熱加載。
這時，我們需要對相應的文件做修改
webpack.dev.conf.js文件:
webpack.config.js文件中入口配置中添加 ‘webpack-hot-middleware/client’，如下：
dev-server文件：
重啟服務，然后修改你的index.html頁面，此時熱加載成功！
最后，我們設置一下快捷鍵，在package.json文件上修改一下，這樣我們就可以通過：npm run build來打包項目，npm run dev跑項目了
到此結束！
源碼地址：https://github.com/Jacky-MYD/webpack