webpack 多頁面應用配置小結

今年公司一直在推行先後端分離開發，恰好有個活動開發的需求，因而想用react多頁面應用去實現。該項目在create-react-app(@3.0.1)腳手架的基礎上開發。

準備工做

下載安裝create-react-app(@3.0.1,其餘版本配置可能略微不一樣)腳手架，並將CRA中的配置所有反編譯到當前項目（方法參考：juejin.im/post/5a5d5b…

創建文件夾規範約束

規範以下（參考微信小程序的文件夾規範）

修改webpack配置

首先修改config文件夾下的paths.js文件，新增以下函數：

// 添加獲取多頁html模板方法
const getMultiPageHtml = (filePath) => {
  return globby.sync(filePath, {
          expandDirectories: {
            files: ['*.html']
          }
        })
        .reduce((arr, file) => {
          let key = file.replace(/(^src\/|\.html$)/g, '');
          return arr.concat([[ 
            key,                        // 入口 chunk key（用文件路徑可保證key惟一性）
            resolveApp(file),            //html template url
            resolveApp(`src/${key}.js`)  //入口js文件 url
          ]])
        }, []);
}
複製代碼

paths.js導出值中新增multiPageList值：

修改webpack.config.js文件，新增以下函數：

// 新增獲取多頁面配置
  const getMultiPageConfig = (files) => {
    return files.reduce((data, file) => {
      const [key, template, appJs] = file;
      if( fs.existsSync( appJs ) ){
        data.entryJs[key] = [
          isEnvDevelopment &&
            require.resolve('react-dev-utils/webpackHotDevClient'),
          appJs
        ].filter(Boolean);
        data.htmlPlugins.push(
          new HtmlWebpackPlugin(
            Object.assign(
              {},
              {
                inject: true,
                chunks: [key],
                template: template,
                filename: `${key}.html`
              },
              isEnvProduction
                ? {
                    minify: {
                      removeComments: true,
                      collapseWhitespace: true,
                      removeRedundantAttributes: true,
                      useShortDoctype: true,
                      removeEmptyAttributes: true,
                      removeStyleLinkTypeAttributes: true,
                      keepClosingSlash: true,
                      minifyJS: true,
                      minifyCSS: true,
                      minifyURLs: true,
                    },
                  }
                : undefined
            )
          )
        )
      }
      return data;
    }, {
      entryJs: { },
      htmlPlugins: [ ]
    })
  }

  const { entryJs, htmlPlugins } = getMultiPageConfig(paths.multiPageList);

複製代碼

接着修改entry 和 plugins 配置項：

自此一個基於CRA的多頁面應用webpack配置完成了，其餘配置優化可根據自身需求調整。

當前配置的優勢

• 配置後不須要手動添加入口文件和htmlWebpackPlugin，只要根據文件目錄規範可以自動生成。
• 支持多層級文件夾，生成後的文件夾與源文件夾目錄結構保持一致。

缺點

• 因爲當前開發活動頁面較少，暫未發現問題，如您在使用中有問題歡迎留言討論。