前端構建實踐--基於webpack的開箱即用的解決方案

時間 2019-12-06

標籤前端構建實踐基於 webpack 即用解決方案简体版

原文原文鏈接

起步

關於基礎知識，已經一些比較科學的理念，不須要我囉嗦說明，你們能夠去看張雲龍大神的github（如下簡稱這個爲fouber的博客）.我直接看這篇博客的時候：臥槽，這tm纔是構建啊。css

可是興奮完了之後，有個很現實的問題：我怎麼去實現呢？而後我就放棄了。html

固然，去把它實現的想法，一直都有。可是,一方面現有的工具都不是很順手，另外一方面本身的積累也不夠。前端

前段時間簡單的看了下webpack,感受有戲，就作了些初步探討。並寫了兩篇文章，文章內容如今看有些小錯誤，可是總體的思想都有體現了（連接文末給出）。node

webpack的入門文章，強烈推薦webpack-howto,有印象有翻譯版的，E文很差的，能夠去找一下。react

1.組件開發

1.1理念

單從形式上，靜態文件不是按類型分目錄，而是按頁面，甚至頁面裏的模塊來分目錄。webpack

因此每一個項目的靜態文件一級目錄，不該該是js,css,img.這種目錄結構隨着項目變大，找文件就讓你很煩躁。好比有個頁面，要下線了，那麼它對應的js，css，img應該也要刪除，可是上面的目錄結構，你很難去肯定某個靜態文件是否是隻有這個頁面引用。比較好的狀況是，可以很容易的辨別能不能刪，若是誤刪，構建的時候就報錯。固然好處還有不少，這個fouber的博客裏有不少說明，就不贅述了。git

那麼寫一個首頁，我可能但願這樣寫：github

/index
    /header
        header.js
        header.less
        header.jsx
        img/
            1.png,2.png...
    /body
        ..相似header
    /footer
        ..相似header
    index.less
    logo.png
    index.entry.js

其中index.entry.js是首頁的入口文件。通常就是引入各個模塊的文件和本身另外的一些資源文件，而後再加一些整合的邏輯web

//index.entry.js中
import React from 'react'
import header from './header/header.js'
import './index.less'
import './logo.png'
    
//下面是業務邏輯代碼

//按需加載可使用require.ensure 或者 bundle-loader

固然這是一種寫法上的便利，你要想寫出屎同樣的代碼，誰都攔不住你json

1.2 實現

落實到實現上，webpack經過各類loader去實現各類類型資源的解析、引用、打包。這個配置好loaders就ok了。

不過這裏，展開來說，有不少細節: 好比圖片的路徑。打包後的相對路徑和你開發時候的相對路徑多是不同的。實際上，路徑問題，很容易錯誤，不過webpack以及各類loader提供的選項還比較細，都有可行的解決方式。一個比較典型的loaders配置

loaders: [
        {
            test: /[\.jsx|\.js ]$/,
            exclude: /node_modules/,
            loader: "babel-loader?stage=0&optional[]=runtime"
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!less-loader')
        },
        {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=10000&name=img/[name]-[hash].[ext]'
        }        
 ]

靜態資源管理

靜態資源管理系統 = 資源表 + 資源加載框架

資源加載框架，實際webpack已經基本把活全作了。

構建的時候，你的代碼就代表了它所依賴的東西，異步加載經過code splitting相關技術，webpack打包的時候，都幫你自動管理。

那麼，你只要對每一個entry生成資源表（我叫作它assets-map）就好了。使用webpack,多頁面，有多個entry，多入口的配置也很簡單

entry: {
    entryName:'entryFilePath.js',
    entryName1:'entryFilePath1.js'
    //...
}

webpack打包完，會提供一個stats對象，webpack(config,function(err,stats){})
，這裏有每一個chunk的詳細信息，利用這個對象，就能夠去生成每一個文件的assets-map。不過那麼重要的東西，固然已經有開源的東西了，assets-webpack-plugins.下面是生成了assets-map的一個例子。hash戳是加載在後面當queryString仍是看成文件名的一部分，均可以配置。

{
      "webpack-coc/lib": {
        "js": "/dist/webpack-coc/lib.js?v=ac46dc0f05a4cc181b911ad1b8058f71e6fbc87d"
      },
      "webpack-coc/common": {
        "js": "/dist/webpack-coc/common.js?v=ef0de9675a8837209c4f",
        "css": "/dist/webpack-coc/common.css?v=ef0de9675a8837209c4f"
      },
      "webpack-coc/index/index.entry": {
        "js": "/dist/webpack-coc/index/index.entry.js?v=7e28f5d80d5d6001e7fe",
        "css": "/dist/webpack-coc/index/index.entry.css?v=7e28f5d80d5d6001e7fe"
      },
      "webpack-coc/contact/contact.entry": {
        "js": "/dist/webpack-coc/contact/contact.entry.js?v=b2e27e29b6fd11004a49"
      },
      "webpack-coc/other/other.entry": {
        "js": "/dist/webpack-coc/other/other.entry.js?v=95edb51bcbc304ccd1ad"
      }
}

後端解析下這個json，就能夠在頁面中生成和文件內容相關的惟一的資源文件的路徑。

開箱即用的方案

上面兩點的說明，代表webpack能知足要求，可是你真正有在實際中，仍是有不少細節和坑的。

首先路徑問題：
js，css的路徑
img 的路徑
css中，引用的img的路徑
發佈後，cdn指向的根路徑
lib和common怎麼處理
各類坑。好比大部分的開源項目，output.libraryTarget都設置成umd,可是這是開發庫用的，開發頁面的時候，umd+ externals+CommonChunkPlugin幾乎必定會報錯。你須要把output.libraryTarget 設置成var.
多個entry文件怎麼辦？開發加一個頁面，就要去改一下配置文件，把entry加進去？這個顯然不行，一個不夠自動化，另外讓你們操做配置文件，是件危險的事。