重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
react应用多入口配置及实践总结
背景
创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为册亨企业提供专业的成都网站制作、成都做网站，册亨网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
还是之前的那个项目，做完国际化没多久，还没来得及划水， 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度， 需要做两套资源。 具体的目标是：同一个URL，PC打开就显示PC的那一套， M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口， 需要改造，今天下午研究了一下，改造了一波， 基本达到了预期， 在这里简单把经验总结分享下。
先睹为快
Mobile:
PC:
.jpg)
输出之后的文件， 相比之前的index.html， 多了一个额外的mobile.html.
最终的源代码目录：
.jpg)
具体的改造步骤如下：
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：
.jpg)
step3: 生成多个html入口文件
Webpack配置多入口后，只是编译出多个入口的Js，入口的HTML文件也需要配置， 可以用HtmlWebpackPlugin来生成。
webpack.config.dev.js 原配置：
// Generates an `index.html` file with the