189 8069 5689

react应用多入口配置及实践总结

背景

创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为册亨企业提供专业的成都网站制作、成都做网站,册亨网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个URL,PC打开就显示PC的那一套, M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口, 需要改造,今天下午研究了一下,改造了一波, 基本达到了预期, 在这里简单把经验总结分享下。

先睹为快

Mobile:

react 应用多入口配置及实践总结

PC:

react 应用多入口配置及实践总结

react 应用多入口配置及实践总结

输出之后的文件, 相比之前的index.html, 多了一个额外的mobile.html.

最终的源代码目录:

react 应用多入口配置及实践总结

具体的改造步骤如下:

Steps

step1: Eject

在下之前图方便, 直接用了create-react-app, 现在需要更改配置, 需要弹出默认配置:

在终端执行:yarn eject.

step2: 修改webpack config

原本的 webpack.config.dev.js:

entry: [
 require.resolve('react-dev-utils/webpackHotDevClient'),
 require.resolve('./polyfills'),
 require.resolve('react-error-overlay'),
 paths.appIndexJs,
],
output: {
 path: paths.appBuild,
 pathinfo: true,
 filename: 'static/js/bundle.js',
 chunkFilename: 'static/js/[name].chunk.js',
 publicPath: publicPath,
 devtoolModuleFilenameTemplate: info =>
  path.resolve(info.absoluteResourcePath),
},

需要修改为:

entry: {
  index: [
   require.resolve('./polyfills'),
   require.resolve('react-dev-utils/webpackHotDevClient'),
   paths.appIndexJs,
  ],
  mobile: [
   require.resolve('./polyfills'),
   require.resolve('react-dev-utils/webpackHotDevClient'),
   paths.appSrc + "/mobile/index.js",
  ]
 },
 output: {
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
   path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 },

可能需要注意的几点:

  • entry从原来的数组扩展为对象,每个key代表一个入口。
  • output中的filename要区分输出名,可增加[name]变量,这样会根据entry分别编译出每个entry的js文件。

这样你就可以在src 目录下新起一个民目录开发新的SPA:

react 应用多入口配置及实践总结

step3: 生成多个html入口文件

Webpack配置多入口后,只是编译出多个入口的Js,入口的HTML文件也需要配置, 可以用HtmlWebpackPlugin来生成。

webpack.config.dev.js 原配置:

  // Generates an `index.html` file with the