零基礎學習webpack打包管理

　　這些天在項目之餘的時間學習了webpack打包項目的東西，很是榮幸的找到一些大神的文章來學習，死勁嚼了幾天，終於略知一二。在之後的工做上還需繼續學習，下面我將分享我這幾天學到的一點東西，但願能讓我一個還不算入門webpack的小白領你們入門。本文主要仍是摘抄大神的文章加上本身手動的一些過程記錄，不喜勿噴，謝謝！開車了！！！開車了！！！

　　1、什麼是Webpack

　　webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成少許的 bundle - 一般只有一個，由瀏覽器加載。

　　webpack的工做原理：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

　　

 

　　2、webpack的使用

　　一、新建項目目錄

　　咱們能夠先把相關的，基本文件及目錄新建好，而後進入到項目中：

　　

　　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、中間件的使用

　　1、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文件裏面作一點修改，以下：

　　一、將 config.output.publicPath 修改成 ‘/‘;

　　二、將 plugins 中 HtmlWebpackPlugin 中的 filename 修改成 ‘index.html’;

　　三、重啓服務

 　　 啓動服務成功！！！

　　可是這樣開發模式下的確是成功了，但是咱們直接修改了 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')，而後重啓服務，一樣是能夠啓動成功！

　　2、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