在大多数情况底下,我们只需要一个单页应用便可以顺利的完成许多应用场景.但是还是免不了有很多情况下我们需要通过多页才能够顺利的完成任务.

本篇文章就为大家讲述如何快速优雅的 生成多页访问.
1.增加入口文件
2.增加HtmlWebpackPlugin

注意:本文环境实在开发环境下配置,生产环境略有不同.稍微整改即可

注意:本文环境实在开发环境下配置,生产环境略有不同.稍微整改即可

注意:本文环境实在开发环境下配置,生产环境略有不同.稍微整改即可

1.增加入口文件

webpack.config.prod.js

//原生代码
entry: [
    //引入三个es6新特性
    require.resolve('./polyfills'),
    //载入热更新
    require.resolve('react-dev-utils/webpackHotDevClient'),
    //入口文件
    paths.appIndexJs,
  ],

这里entry是一个数组,不支持CommonsChunkPlugin .所以我们根具webpack官方文档

https://webpack.js.org/concepts/entry-points/#multi-page-application

把entry改成一个对象.
此时 可以这样子写

entry:{
index:[
    //引入三个es6新特性
    require.resolve('./polyfills'),
    //载入热更新
    require.resolve('react-dev-utils/webpackHotDevClient'),
    //入口文件
    path.resolve(paths.appSrc, "index/index.js")
  ],
admin:[
    //引入三个es6新特性
    require.resolve('./polyfills'),
    //载入热更新
    require.resolve('react-dev-utils/webpackHotDevClient'),
    //入口文件
    path.resolve(paths.appSrc, "admin/index.js")
  ],
}

此时我们就成功载入了index和admin模块
但是此时注意 因为是在开发模式底下 为了避免引入js冲突 的问题.
output中需要修改

//增加模块名字和hash值 避免缓存  等等一切问题
filename: 'static/js/[name].[hash:8].bundle.js',

2.增加HtmlWebpackPlugin

webpack.config.prod.js

new HtmlWebpackPlugin({
      inject: true,
     chunks: ['index'],
      template: paths.appHtml,
     filename: "index/index.html"
     }),
new HtmlWebpackPlugin({
      inject: true,
     chunks: ['admin'],
      template: paths.appHtml,
     filename: "admin/index.html"
     }),

非常明确 到处两个不同的index.html

---

配置到这里 npm start 发现还是有一点小问题,就是永远无法访问到admin,google一翻之后,发现create-react-app帮我们做的太好了,为了支持react-router 这个本家的组件的在开发环境下的调试,已经在配置文件中帮我们配置好了 可以直接访问react router 路径 访问组件

其实就是支持historyApi,这点在我用刚入门react-router是给我了很大的疑惑,因为线上和开发环境是完全不同的.so....大厂给我们考虑的非常好,但是还是误导了小白的我

ps:上面完全是我在瞎扯,官方原文链接在这里

原话链接:https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

废话说了一摞,说一下解决的方法.

修改webpackDevServer.config中的historyApiFallback为false(这样子就无法直接访问组件地址访问组件了.完美的解决方式,请看官网即可)

修改webpackDevServer.config中的historyApiFallback为false(这样子就无法直接访问组件地址访问组件了.完美的解决方式,请看官网即可)

修改webpackDevServer.config中的historyApiFallback为false(这样子就无法直接访问组件地址访问组件了.完美的解决方式,请看官网即可)

生产环境下不用考虑这个问题

3.优雅de

恩恩呢呢,如何更加优雅得解决多页访问的问题呢...其实在第二章就讲到了env.js的用处 这里 不多说 贴 几行代码大家自己理解一下 哈哈 (其实 是我要去洗澡了,再不洗澡没惹谁了而且还好困,不想写了,好困啊)

根目录下 创建 .env.local

REACT_APP_ENTRY=["index","admin"]

回到webpack.config.dev

定义两个函数

const env = getClientEnvironment(publicUrl);
function setEntryConfig(arrayString) {
  let entryArray = JSON.parse(arrayString)
  if (!Array.isArray(entryArray)) {
    console.log("请确保entry是一个数组")
    return {}
  }
  let entry = {}
  entryArray.map(function (item) {
    entry[item] = [
      require.resolve("./polyfills"),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      //合成入口文件
      path.resolve(paths.appSrc, item + "/index.js")
    ]
  })
  return entry
}
function setHtmlPluginConfig(arrayString) {
  let entryArray = JSON.parse(arrayString)
  if (!Array.isArray(entryArray)) {
    console.log("请确保entry是一个数组")
    return []
  }
  let plugin = []
  entryArray.map(function (item) {
    plugin.push(
      new HtmlWebpackPlugin({
        inject: true,
        chunks: [item],
        template: paths.appHtml,
        filename: item + "/index.html"
      })
    )
  })
  return plugin
}

然后应用上

entry: setEntryConfig(env.raw.REACT_APP_ENTRY),

...(setHtmlPluginConfig(env.raw.REACT_APP_ENTRY)),

其实还能更加扩展更加灵活...但是本宝宝要去洗澡了..以后再说吧