摘要：最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用做一套模塊化配置方案。

最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行 SEO，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用 webpack 做一套模塊化配置方案。
下面主要針對(duì)一些重要的點(diǎn)提供思路，并不作詳解。完整的代碼，我會(huì)放在 github（項(xiàng)目地址）上供大家參考，如果有優(yōu)化的地方，請(qǐng)?jiān)谠u(píng)論區(qū)指點(diǎn)出來，。

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

多頁(yè)面，首先最重要的就是處理多個(gè) html 模板和對(duì)應(yīng)的多個(gè)入口文件。

在項(xiàng)目根目錄創(chuàng)建一個(gè) htmlarrary.js，用來存儲(chǔ)頁(yè)面配置：

// htmlarrary.js

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

然后在 /build/utils.js 創(chuàng)建 getHtmlArray 方法，用來自動(dòng)生成多個(gè)模板的配置：

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

exports.getHtmlArray = function (moduleExportsPlugins) {

  // 根據(jù)模板配置生成 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, // 頁(yè)面要引入的包
      minify: process.env.NODE_ENV === "development" ? false : {
        removeComments: true, // 移除HTML中的注釋
        collapseWhitespace: true, // 折疊空白區(qū)域 也就是壓縮代碼
        removeAttributeQuotes: true, // 去除屬性引用
      },
    };
  };

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

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

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

module.exports = {
  // ... 相關(guān)配置
}

getHtmlArray(module.exports.plugins)

在 /build/utils.js 創(chuàng)建 getEntry 方法，用來自動(dòng)生成入口文件的配置：

// /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"); // 引入這個(gè)，是為了用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 錯(cuò)誤提醒；

ts-loader 解析 typescript 語法；

babel-loader 解析 ES6 語法。

針對(duì)以上需求，我們來配置一下子 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 // 優(yōu)化打包速度
        }
      }
    ]
  }
]

在生產(chǎn)環(huán)境，我們需要對(duì) js 文件進(jìn)行壓縮，公共代碼抽離，所以還需要在 webpack.prod.conf.js 中這樣去優(yōu)化一下：

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

module.exports = merge(baseConfig, prodConfig)

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

postcss-loader 安裝 autoprefixer 插件，自動(dòng)進(jìn)行兼容性處理；

sass-loader 解析 sass 語法；

MiniCssExtractPlugin 進(jìn)行 css 壓縮。

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

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

module.exports = [
  {
    test: /.scss$/i,
    use: [
      Object.assign(
        // 生產(chǎn)環(huán)境壓縮 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"
    ]
  }
]

在生產(chǎn)環(huán)境，我們需要對(duì) css 文件進(jìn)行壓縮，所以還需要在 webpack.prod.conf.js 中這樣去優(yōu)化一下：

// 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 方面，我們一般有以下需求：

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

html 中 img 標(biāo)簽的圖片可以被解析。

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

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

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

// webpack.dev.conf.js

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

這樣智能啟動(dòng) css 熱更新，如果需要 js 熱更新，需要添加一段代碼，請(qǐng)自行查找 官網(wǎng)文檔。

如果 img 標(biāo)簽的 src 為空的話，就報(bào)錯(cuò) xxxHTMLLINKxxx0.

如果報(bào)錯(cuò)：TS2688: Cannot find type definition file for "unist". 說明需要安裝依賴 @types/unist，其他類似報(bào)錯(cuò)一樣，這是 [email protected] 更換 types 支持方式導(dǎo)致的報(bào)錯(cuò)。

編譯后 css 圖片路徑錯(cuò)誤，根據(jù)是否是生產(chǎn)環(huán)境來動(dòng)態(tài)添加 publicPath，點(diǎn)擊這里。