create-react-app配置多页应用

2018-01-10 admin

背景:最近接手一个混合app项目,但是其中的页面都是用jquery写的,有点乱,所以决定用react重构一下,因为涉及到很多页面,所以create-react-app只能自己配置成多页的了。弄这个也弄了挺久的,主要是对webpack的各个配置项不够了解。也走了很多弯路,所以在这就写下来,算作对自己的一个总结。

具体配置

1.使用create-react-app 创建一个单页应用,并且创建成功之后运行 npm run eject 暴露配置

2.在config中修改webpack.config.dev.js文件

//这里我已经写成对象格式了,有多少个页面就添加多少个key:value对,这里我已经添加了一个admin,数组中的paths.appSrc+'/admin.js'就是这个html页面的入口文件
    entry: { 
        index:[
            require.resolve('./polyfills'),
            require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.appIndexJs,
        ],
        admin:[
            require.resolve('./polyfills'),
            require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.appSrc + '/admin.js',
        ]
    }
  • 修改plugins中的HtmlWebpackPlugin
    //多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配,例如上面entry中有index和admin这两个。这里的chunks也需要是index和admin
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["index"],
        template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["admin"],
        template:paths.appHtml,
        filename:'admin.html'
    }),

3.修改config下的webpack.config.prod.js文件

    //这里的paths.appIndexJs和paths.appSrc+'/admin.js'依然是每个html的入口文件
    entry:{
        index:[
            require.resolve('./polyfills'), 
            paths.appIndexJs
        ],
        admin:[
            require.resolve('./polyfills'),
            paths.appSrc+'/admin.js'
        ]
    }
  • 修改plugins中的HtmlWebpackPlugin
    //和开发环境下一样,多少个html就new多少个 HtmllWebpackPlugin,每个都需要指定chunks,并且指定filename,在minify中配置是否压缩js、css等,这是生产环境下的配置
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["index"],
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["admin"],
      template: paths.appHtml,
      filename:'admin.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),

3.在开发环境中如果想通过地址访问不同的页面,需要修改webpackDevServer.config.js

    //这里的rewrites:[ {from: /^\/admin.html/, to: '/build/admin.html' }] 数组里面是一个个对象,对象中前面的值是在开发时候访问的路径,例如 npm run start之后会监听 localhost:3000 ,此时在后面加上 /admin.html就会访问admin.html中的内容,默认是访问index.html;数组中的第二个值是生产环境下的文件的路径。如果有很多页面,就在rewrites中添加更多对象
    historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    },

在我的github上我已经创建了一个基于create-react-app的模板,里面也有例子和讲解,大家可以看一看。

原文链接:https://segmentfault.com/a/1190000012772616

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-5716.html

文章标题:create-react-app配置多页应用

相关文章
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
HTML5渐行渐近 APP还能走多远
鎽樿�侊細浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嬪�栥€傚湪鍙栧緱杈夌厡鎴愮哗鐨勫悓鏃讹紝APP涔熷悓鏍烽潰涓寸潃璇稿�氶毦浠ラ€捐秺鐨勯殰纰嶃€� 鍦ㄧ粡鍘嗕簡闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡滅啛钂傝惤銆佹�e紡瀹...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
CIO最为关注的六大企业移动应用平台
2014年10月18日,由北大信息化与管理研究中心、北大CIO班教务办、大华南IT高管共赢圈联合主办,CIO时代网承办的2014“北大CIO中国行-深圳站”活动顺利举行。会上,来自各大企业的CIO、移动应用专家等140余人共聚一堂,共同探讨...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()"...
2017-03-07
javascript 中的try catch应用总结
<script language="javascript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.mes...
2017-04-05
回到顶部