用vue-cli1/2搭建一個vue專案時，可以看到有很多關於webpack配置的檔案。我們不需要知道那些繁瑣的配置檔案有什麼作用，只需在控制檯輸入npm run dev，專案自動啟動，我們就可以愉快的寫業務程式碼了。

雖然vue-cli幫我們做好了一切，我們就能不用學webpack了嗎？NoNoNo...現代前端工程師必備的技能就是模組化構建打包專案，不信去那些招聘網站的前端JD看看。廢話不多說，下面讓我們用webpack構建一個簡單的vue-cli。

第一步：安裝NodeJS（webpack基於NodeJS）

下載地址：http://nodejs.cn/download/，傻瓜式安裝，一直下一步就ok。安裝完畢，在控制檯輸入node -v

NodeJS是JavaScript的執行環境，像瀏覽器一樣。安裝之後可以通過node命令執行JavaScript程式碼，比如：node a.js

npm（node package manage of JavaScript）作用：Node.js下載後自帶npm，類似於迅雷下載資源，可以下載專案所需的依賴模組/包。

1. 允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
2. 允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。
3. 允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。

npm是國外的，可能會比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：npm init初始化生成package.json

1. 首先建立一個空的專案資料夾，
2. 進入資料夾，shift+右擊，出現【在此處開啟命令視窗(W)】，
3. 點選進入cmd控制檯，命令路徑即為當前資料夾目錄，
4. 然後輸入npm init -y，回車，之後會在根目錄建立一個package.json。

package.json用來存放整個專案的依賴模組/包，當我們把整個專案遷移到別的地方使用時，專案執行時會根據package.json的依賴引數自動下載所需模組/包。

第三步：安裝webpack

命令：npm install [email protected] --save-dev

測試webpack在本地是否可用，webpack -v

建議安裝wepack3，webpack4對vue-cli的相容還不是很好

webpack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

Grunt和Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

第四步：webpack打包模組

很多檔案型別，比如vue、css、img、字型...需要我們配置相應的loader才能完成正確解析並打包。

比如，把css打包到js檔案中，需要安裝css載入器，安裝命令：npm install --save-dev style-loader css-loader
css-loader 和 style-loader，二者處理的任務不同
css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能
style-loader將所有的計算後的樣式用<style></style>加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中

命令列打包（不推薦）：

webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自動建立dist目錄

這種打包方式，在js檔案中引入css檔案時要註明loader：require('style-loader!css-loader!../css/index.css') 注意順序不能錯！

配置檔案打包（推薦）：
需要在專案的根目錄建立webpack.config.js.專案裡配置如下：

module.exports = {
    entry:  __dirname + "/src/main.js",// 入口檔案，可以多個
    output: {
        path: __dirname + "/dist",  // 絕對路徑，打包後的檔案存放的資料夾
        filename: "build.js"  // 相對路徑，打包後輸出的檔案
    },
　 // 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules
    // 2. 命令列方式引入css的require('style-loader!css-loader!../css/index.css') 就可以寫成 require('../css/index.css')
　module: {  
       loaders: [
          {
             test: /\.css$/,
             loader: 'style-loader!css-loader'
         },
         {
            test: /\.(jpg|png|jpeg|svg)$/,
            loader: 'url-loader',
            options: {
                  // 大於10000位元組會被打包成重新命名的圖片資源，否則打包成base64
                  limit: 10000
              // name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
         },
         {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: ['env'], // 處理關鍵字，es6/7/8/9...都能轉化
              plugins: ['transform-runtime'] // 處理函式
            }
          }
      ]
   }
}

package.json中配置scripts:{"build": 'webpack'}（webpack命令會預設執行webpack.config.js檔案），執行npm run build即可打包

第五步：搭建webpack伺服器

上面4步就可以完成專案的打包任務，但是開發環境還需要更進一步配置。

webpack-dev-server可以像php/java/.net...一樣搭建為我們搭建一個伺服器，這樣就可以熱更新專案程式碼，實現實時執行專案，進而方便我們除錯專案。

1. 安裝： npm install webpack-dev-server -g
2. 寫入到依賴： npm install webpack-dev-server --save-dev
3. 配置命令：scripts:{"dev": 'webpack-dev-server --hot --inline'} // 實現熱更新和線上編譯
4. 執行命令：npm run dev
5. 輸入localhost:8080/執行... // webpack-dev-server的預設埠是8080

具體程式碼見：https://github.com/cwh2407606301/webpack-vue-cli

最後，webpack版本更新很頻繁，各種npm包也更新很頻繁，這就會導致一個相容問題，動不動就報錯，這點很讓人頭疼，很容易會導致從入門到放棄。耐心，耐心，耐心.