基於webpack打包多頁應用,對前端工程化的思考

語言: CN / TW / HK

前言

Vue,React 風靡的時代,加上基於框架衍生出來的各種腳手架,不得不説,現在 前端工程化 程度不遜色於任何端的開發

隨着各種腳手架集成度的不斷提高,現在幾乎零配置就可以開發整個項目,俗稱傻瓜式開發

是我們的代碼變傻了嗎?

不!!

是開發代碼的人變的越來越傻了

腳手架並不能滿足所有開發需求

比如,當我們需要開發一個公司官網,考慮到網站的SEO很可能我們還是需要使用原生js開發,開發模式大致如下:

開發模式很原始,本質上來説還是前後端不分離開發

雖然可以使用 服務端渲染, 及 預渲染 來優化這種開發方式,即可以實現 前後端分離開發,又兼顧了網站的 SEO,但你可能還會遇到一些問題

  1. 歷史性原因,推翻重做又不太現實
  2. 服務端渲染,技術開發成本變高
  3. 至少需要服務器搭建一套node環境
  4. ...

這個時候,可能我們又要回到上古時代的開發模式

使用webpack優化原始開發流程

也就是使用webpack打包多頁應用,讓我們既可以有開發單頁應用的絲滑體驗,又滿足項目開發需求

最重要的是手寫webpack配置可以讓你對前端工程化有更深入理解,讓開發代碼的人越來越聰明,讓代碼變得越來越傻

webpack工作流程(白話篇)

抽象來説,就是

  • 開發的時候,讓代碼更 '親民'

在模塊開發下,我們可以把代碼分開,組件化,提高開發效率使代碼更容易維護

  • 打包後,讓代碼更 '親計算機'

打包後,再把代碼組合成瀏覽器可識別的樣子,同時讓代碼足夠小,足夠健壯

有了這個理念後,我們就可以開始搭建wbpack

項目目錄結構

開發環境時項目文件結構

打包後我們希望項目結構足夠乾淨

webpack多頁面配置

  1. 多代碼警告!
  2. 完整源碼已放github,並配有完整註釋,歡迎直接去gaihub上看源碼
  3. 如有幫助,歡迎star,萬分感謝

效果演示

  • 開發環境

  • 生成環境

入口配置

為了讓我們可以快速看到頁面效果,我們先把入口寫死成兩個文件來説明打包的是多頁面(後續會改成自動讀取)

  • entry

module.exports = {
  entry: {
    index: path.join(__dirname, "../src/pages/index/index.js"),
    user: path.join(__dirname, "../src/pages/user/user.js"),
  }
 }
複製代碼

出口配置

  • output
 output: {
    path: path.resolve(__dirname, "../dist"), // 打包路徑
    filename: assetsPath("js/[name]_[hash:7].js"), // 文件名稱
    publicPath: "./",
  },
複製代碼
  • 使用html-webpack-plugin,動態生成對應模板

同樣,在這裏我們先寫死為index和user,兩個頁面模板

const hwp = [
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: resoveDev("/index/index.html"),
    title: "首頁",
    chunks: ["index", "common"],
    minify: {
      removeComments: false,
      collapseWhitespace: false,
      removeAttributeQuotes: false,
      //壓縮html中的js
      minifyJS: false,
      //壓縮html中的css
      minifyCSS: false,
    },
  }),
  new HtmlWebpackPlugin({
    filename: "user.html",
    template: resoveDev("/user/user.html"),
    title: "我的",
    chunks: ["user", "common"],
    minify: {
      removeComments: false,
      collapseWhitespace: false,
      removeAttributeQuotes: false,
      //壓縮html中的js
      minifyJS: false,
      //壓縮html中的css
      minifyCSS: false,
    },
  }),
];
// 在插件中使用
plugins:[...hwp]
複製代碼

css處理

webpack並不支持處理除了js以外的任何文件,其他文件都需要通過相應的loader來處理

...
module:{
	rules:[
       {
        test: /\.less$/,
        use: [
          {
            options: {
              publicPath: "../../", // 配置css裏面的路徑
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
    ]
}
...

複製代碼

webpack默認會把css同樣打包到js裏面,我們還需要使用mini-css-extract-plugincss抽離為單獨的文件

...
module:{
	rules:[
       {
        test: /\.less$/,
        use: [
         loader: MiniCssExtractPlugin.loader,
          {
            options: {
              publicPath: "../../", // 配置css裏面的路徑
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
    ]
}
...

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins:[new MiniCssExtractPlugin()]
複製代碼

圖片處理

圖片處理 使用url-loader

module:{
  rules:[
      {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: "url-loader",
          options: {
            limit: 1000, // 1kb一下的圖片變成base64格式
            name: "[name]_[hash:7].[ext]", // 給圖片添加hash
            outputPath: "./static/images", // 圖片輸出路徑
          },
        },
  ]
}

複製代碼

這裏需要注意的是url-loader只能處理css文件裏面的圖片,我們還需要使用html-loader來處理html裏面的圖片, 但是html-loaderhtml-webpack-plugin有衝突,所以我們不能在webpack裏面對html-loader進行配置,只能在使用html中使用圖片的時候妥協

 <img src=" <%= require('@/assets/images/logo.png' )%>" alt="" />
複製代碼

html-loader的重要用途在於可以實現html的模塊化

<body>
	<!-- 加載公用html -->
  	<%= require('html-loader!../common/header.html') %>
</body>

複製代碼

區分開發環境和生產環境

我們使用三個文件來配置webpack

package.json文件添加對應命令,不同的命令使用不同的配置文件

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config config/webpack.dev.config.js --open",
    "builds": "webpack  --config  config/webpack.pro.config.js",
  }
複製代碼

webpack.dev.config.jswebpack.pro.config.js進行組合

// base 為基礎文件  pro 為生成環境配置
merge(base, pro)
複製代碼

後續優化

第一版本我們遵循 代碼先運行起來 為原則,沒有對webpack做任何優化,下個版本將會更新

    1. 按照約定,路由自動生成
    1. js,csstree-shaking優化
    1. eslint+prettier的配置
    1. 做成命令行工具,分為pc端及移動端,在使用命令行生成項目時可自行選擇

最後

記得點贊喲😉