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做者大神的這個配置就行了，根據需求自行調整，太優秀。