webpack 教程 那些事兒04-webpack項目實戰分析

這節主要講解真正項目用用到的 webpack配置問題，項目實戰篇

就像我們不會完全做一個項目，不用別人的輪子一樣。
這個配置我們借用 vue-cli 搭建的配置來研究，因為它已經足夠優秀。

有了前面的基礎，這節快速切入主題。

文章目錄

1. 1. 用 vue-cli腳手架 初始化項目
2. 2. 學習分析vue-cli的配置
   1. 2.1. 目錄結構
   2. 2.2. config目錄
   3. 2.3. build目錄,webpack配置精華
      1. 2.3.1. webpack.base.conf.js
      2. 2.3.2. webpack.dev.conf.js
      3. 2.3.3. webpack.prod.conf.js
      4. 2.3.4. utils.js
      5. 2.3.5. dev-client.js
      6. 2.3.6. build.js
3. 3. 一點閑話 es6 babel
4. 4. 一點想法關於spa單頁應用

用 vue-cli腳手架 初始化項目

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

install

#全局安裝 vue-cli
$npm install -g vue-cli

#創建一個基於 “webpack” 模板的新項目
$ vue init webpack my-project

#安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

注意：vue init webpack my-project 這一步初始化過程中，可根據需求選擇是否需要某些插件

ok，就是這么簡單！

學習分析vue-cli的配置

• 目錄結構

  

• config目錄

  主要是index.js配置，build 和 dev各自的輸入輸出，以及開發環境服務的默認端口和代理配置項等
  其他三個文件顧名思義，都是方便配置切換環境用的變量。
  這種思路非常值得學習，抽離配置，合並（merge）使用。

• build目錄,webpack配置精華

  • webpack.base.conf.js

    此項配置之前已經講解過，這里主要說明 resolve 配置項

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    resolve: { extensions: ['', '.js', '.vue'], //后綴名，用於模塊查找 fallback: [path.join(__dirname, '../node_modules')], alias: { jquery: path.resolve(__dirname, "./components/jquery/dist/jquery.js") } } // fallback: 這歌主要用於解決路徑找不到問題，配置成絕對路徑   /** * [alias 這是個重點,別名，別笑這不是廢話] * 簡單說有一個人叫 萊昂納多·迪卡普里奧（Leonardo DiCaprio） * 這名字真特么長，不符合我們習慣，所以給你另起了一個代號叫 小李子 * 以后大家叫小李子，我們就會明白是叫 萊昂納多·迪卡普里奧 * 所以配置好上面那個之后，我們想召喚 jQuery的時候， * 不用寫那么多，只需 require("jquery") 即可 * 有沒有瞬間覺得世界很美好呢 */

  聰明的您可能還會發現一個問題，jquery這種東西，幾乎每個頁面都需要，每次都召喚require(“jquery”)有沒有很煩惱。
  這里傳授你 什么叫做 大召喚術 ,一次召喚，隨身使用。說人話就是做成 全局變量。。。
  我們只需要在中加入一個插件即可:

  1 2 3 4 5 6

  plugins: [ new webpack.ProvidePlugin({ $: "jquery", _: "underscore" }) ]

  看見沒，上面想召喚什么就 加進去就好了，陽光真好啊.

  • webpack.dev.conf.js

    這里就很簡單了，簡直和我們上篇的測試教程一樣嘛（我們那個本來就是只用來測試哈）參照webpack那些事兒03

  • webpack.prod.conf.js

    打開看看源碼，上線嘛，就是一些代碼打包壓縮放緩存等等處理，webpack本身就擁有這些功能，正常使用即可.

  • utils.js

    這個是作者用來提取打包vue里面的靜態資源寫的工具函數，我對vue還沒有太過深入使用，請自行理解。

  • dev-client.js

    參照webpack那些事兒03

  • build.js

    這里也沒什么可說的，主要調用用webpack.prod.conf.js配置運行打包程序.
    這里着重推薦 shelljs 插件

  一點閑話 es6 babel

  用babel轉碼，切記一點，必須有轉碼規則配置，可寫入.babelrc文件

  1 2 3 4 5 6

  # .babelrc { "presets": ["es2015", "stage-2"], "plugins": ["transform-runtime"], "comments": false }

  或者寫入babel-loader加載器

  1 2 3 4 5 6 7 8 9 10 11

  loaders: [ { test: /\.js$/, loader: 'babel', query: { presets: [ 'es2015'] }, exclude: '/(node_modules|components)/', include: "/" } ]

如果發現 便已完畢仍不識別es6語法，不識別import,請更改上面 include 值為 根目錄 試試。

一點想法關於spa單頁應用

構建單頁應用，用vue作者大神的這個配置就好了，根據需求自行調整，太優秀。