webpack 配置多頁面應用的一次嘗試

Mike617 發布于2019-08-23 18:07 / 1155人閱讀

摘要：最近有一個項目，考慮到要進行，所以要做成多頁面應用。為了保證開發速度和開發效率，所以決定使用做一套模塊化配置方案。

最近有一個項目，考慮到要進行 SEO，所以要做成多頁面應用。為了保證開發速度和開發效率，所以決定使用 webpack 做一套模塊化配置方案。

下面主要針對一些重要的點提供思路，并不作詳解。完整的代碼，我會放在 github（項目地址）上供大家參考，如果有優化的地方，請在評論區指點出來，。

|-- build                           webpack 配置
|   |-- utils.js                    處理 webpack 配置的公共方法
|   |-- webpack.base.conf.js        公共配置    
|   |-- webpack.dev.conf.js         開發環境配置
|   |-- webapck.prod.conf.js        生產環境配置
|   |-- webpack.rules.conf.js       文件處理規則
|-- dist                            存放變異后文件
|-- |
|-- src                             源文件
|   |-- assets
|   |-- pages 
|   |   |-- index                   首頁
|   |   |   |-- index.html          首頁模板
|   |   |   |-- index.js            首頁入口文件
|   htmlarrary.js                   頁面配置文件

多頁面

多頁面，首先最重要的就是處理多個 html 模板和對應的多個入口文件。

html 模板

在項目根目錄創建一個 htmlarrary.js，用來存儲頁面配置：

// htmlarrary.js

module.exports = [
  {
    _html: "index",
    title: "首頁",
    chunks: ["index", "manifest", "vendors"] // 頁面用到的vendor模塊
  },
  {
    _html: "login",
    title: "登錄",
    chunks: ["login"]
  }
]

然后在 /build/utils.js 創建 getHtmlArray 方法，用來自動生成多個模板的配置：

// /build/utils.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
const htmlArray = require("../htmlarray.js")

exports.getHtmlArray = function (moduleExportsPlugins) {

  // 根據模板配置生成 HtmlWebpackPlugin 需要的配置
  const getHtmlConfig = function (name, chunks, title) {
    return {
      template: `./src/pages/${name}/index.html`,
      filename: `./${name}.html`,
      favicon: "./src/assets/images/public/favicon.ico",
      title,
      inject: true,
      hash: true, // 開啟hash
      chunks, // 頁面要引入的包
      minify: process.env.NODE_ENV === "development" ? false : {
        removeComments: true, // 移除HTML中的注釋
        collapseWhitespace: true, // 折疊空白區域 也就是壓縮代碼
        removeAttributeQuotes: true, // 去除屬性引用
      },
    };
  };

  // 循環創建模板配置
  htmlArray.forEach((element) => {
    const { _html, chunks, title } = element
    moduleExportsPlugins.push(new HtmlWebpackPlugin(getHtmlConfig(_html, chunks, title)))
  })
}

在 webpack.base.conf.js 中通過 getHtmlArray 添加多頁面引擎配置：

const { getHtmlArray } = require("./utils.js")

module.exports = {
  // ... 相關配置
}

getHtmlArray(module.exports.plugins)

入口文件

在 /build/utils.js 創建 getEntry 方法，用來自動生成入口文件的配置：

// /build/utils.js
const glob = require("glob")

exports.getEntry = function () {
  const entry = {}
  // 讀取src目錄所有page入口
  glob.sync("./src/pages/*/*.js").forEach((name) => {
    const start = name.indexOf("src/") + 4;
    const end = name.length - 3;
    const eArr = [];
    const n = name.slice(start, end).split("/")[1];
    eArr.push(name);
    eArr.push("@babel/polyfill"); // 引入這個，是為了用async await，一些IE不支持的屬性能夠受支持，兼容IE瀏覽器用的
    entry[n] = eArr;
  })
  return entry;
}

在 webpack.base.conf.js 中通過 getEntry 添加多入口配置：

// webpack.base.conf.js

const { getEntry } = require("./utils.js")

module.exports = {
  entry: getEntry(),
}

JS 方面，我們一般有以下需求：

eslint 錯誤提醒；

ts-loader 解析 typescript 語法；

babel-loader 解析 ES6 語法。

針對以上需求，我們來配置一下子 rules，并且做一下延伸：

// webpack.rules.conf.js

module.exports = [
  {
    test: /.(js|ts)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                chrome: "58",
                ie: "8"
              },
              corejs: 2
            }]
          ]
        }
      },
      {
        loader: "ts-loader"
      },
      {
        loader: "eslint-loader",
        options: {
          cache: true // 優化打包速度
        }
      }
    ]
  }
]

在生產環境，我們需要對 js 文件進行壓縮，公共代碼抽離，所以還需要在 webpack.prod.conf.js 中這樣去優化一下：

// webpack.prod.conf.js

cconst merge = require("webpack-merge")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const baseConfig = require("./webpack.base.conf.js")

const prodConfig = {
  optimization: {
    minimizer: [
      // 會導致 sourcemap 消失
      new UglifyJsPlugin({
        uglifyOptions: ({
          compress: false
        })
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: { // 抽離第三方插件
          test: /[/]node_modules[/]/, // 指定是node_modules下的第三方包
          name: "vendors",
          priority: -10 // 抽取優先級
        },
        utilCommon: { // 抽離自定義
          name: "common",
          minSize: 0, // 將引用模塊分離成新代碼文件的最小體積
          minChunks: 2, // 表示將引用模塊如不同文件引用了多少次，才能分離生成新chunk
          priority: -20
        }
      }
    },
    // optimization.runtimeChunk 就是告訴 webpack 是否要把這部分多帶帶打包出來，來優化緩存問題
    runtimeChunk: {
      name: "manifest"
    }
  }
}

module.exports = merge(baseConfig, prodConfig)

CSS

CSS 方面，我們一般有以下需求：

postcss-loader 安裝 autoprefixer 插件，自動進行兼容性處理；

sass-loader 解析 sass 語法；

MiniCssExtractPlugin 進行 css 壓縮。

針對以上需求，我們來配置一下子 rules，并且做一下延伸：

// webpack.rules.conf.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = [
  {
    test: /.scss$/i,
    use: [
      Object.assign(
        // 生產環境壓縮 css 需要使用 MiniCssExtractPlugin.loader 代替 style-loader
        { loader: process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader" },
        // 解決編譯后 css 圖片不能正常顯示的問題
        process.env.NODE_ENV === "production" ? { options: { publicPath: "../" } } : {}
      ),
      "css-loader",
      "sass-loader",
      "postcss-loader"
    ]
  }
]

在生產環境，我們需要對 css 文件進行壓縮，所以還需要在 webpack.prod.conf.js 中這樣去優化一下：

// webpack.prod.conf.js

cconst merge = require("webpack-merge")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const baseConfig = require("./webpack.base.conf.js")

const prodConfig = {
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
      chunkFileName: "[id].[contenthash:8].css"
    }),
  ]
}

module.exports = merge(baseConfig, prodConfig)

images

images 方面，我們一般有以下需求：

css 和 js 中的圖片可以被解析；

html 中 img 標簽的圖片可以被解析。

針對以上需求，我們來配置一下子 rules，并且做一下延伸：

// webpack.rules.conf.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = [
  {
    test: /.html$/,
    use: [
      // 如果 img 標簽的 src 為空的話，就報錯 xxxHTMLLINKxxx0.
      {
        loader: "html-loader", 
      }
    ]
  },
  {
    test: /.(png|jpg|gif|ico)$/,
    use: [
      {
        loader: "url-loader",
        options: {
          name: "[name].[hash:8].[ext]",
          limit: 30000,
          outputPath: "./images"
        }
      }
    ]
  }
]

其他 devserver 和熱更新

// webpack.dev.conf.js

const devConfig = {
  devServer: {
    open: true,
    host: "0.0.0.0",
    port: 2000,
    useLocalIp: true,
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

這樣智能啟動 css 熱更新，如果需要 js 熱更新，需要添加一段代碼，請自行查找 官網文檔。

報錯

如果 img 標簽的 src 為空的話，就報錯 xxxHTMLLINKxxx0.

如果報錯：TS2688: Cannot find type definition file for "unist". 說明需要安裝依賴 @types/unist，其他類似報錯一樣，這是 typescript@2.0 更換 types 支持方式導致的報錯。

編譯后 css 圖片路徑錯誤，根據是否是生產環境來動態添加 publicPath，點擊這里。

GPU云服務器云服務器多頁面應用 js加載當前頁面一次 js 第一次打開頁面 webpack cdn配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104713.html

webpack 配置多頁面應用的一次嘗試

摘要：最近有一個項目，考慮到要進行，所以要做成多頁面應用。為了保證開發速度和開發效率，所以決定使用做一套模塊化配置方案。最近有一個項目，考慮到要進行 SEO，所以要做成多頁面應用。為了保證開發速度和開發效率，所以決定使用 webpack 做一套模塊化配置方案。下面主要針對一些重要的點提供思路，并不作詳解。完整的代碼，我會放在 github（項目地址）上供大家參考，如果有優化的地方，請在...

lushan 2019-08-02 15:18 評論0 收藏0
深入理解 Webpack 打包分塊（下）

摘要：例如允許我們在打包時將腳本分塊利用瀏覽器緩存我們能夠有的放矢的加載資源。文章的內容大體分為兩個方面，一方面在思路制定模塊分離的策略，另一方面從技術上對方案進行落地。我之前提到測試之下是什么樣具體的場景并不重要。前言隨著前端代碼需要處理的業務越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的...

pingan8787 2019-05-22 19:26 評論0 收藏0
Service Worker學習與實踐（一）——離線緩存

摘要：的本質是一個，它獨立于主線程，因此它不能直接訪問，也不能直接訪問對象，但是，可以訪問對象，也可以通過消息傳遞的方式與主線程進行通信。的最佳用法其實就是配合做離線緩存。什么是Service Worker Service Worker本質上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網絡可用時作為瀏覽器和網絡間的代理。它們旨在（除其他之外）使得能夠創建有效的離線體驗，攔截網絡請...

xiaochao 2019-08-23 12:03 評論0 收藏0
HTML5 活動宣傳頁「My Flyme 獨家記憶」開發實踐總結

摘要：年前放假的最后一天，我們上線了獨家記憶活動宣傳頁。微信分享主要代碼參考獨家記憶當時光凝固，當回憶定格。這是屬于我和的獨家記憶。年前放假的最后一天，我們上線了「My Flyme 獨家記憶」 H5 活動宣傳頁。因種種原因，直到放假前幾天，才突然要求我們參與并開始項目的前端部分。此時大概的情況是：所有數據已計算完畢；后端接口已完成待聯調；交互視覺只出了不到四分之一(一共二十多個頁面)；我...

Anonymous1 2019-08-20 14:13 評論0 收藏0