create-react-app配置多頁應用

creat-react-app的多頁腳手架的配置

背景：最近接手一個混合app項目，可是其中的頁面都是用jquery寫的，有點亂，因此決定用react重構一下，由於涉及到不少頁面，因此create-react-app只能本身配置成多頁的了。弄這個也弄了挺久的，主要是對webpack的各個配置項不夠了解。也走了不少彎路，因此在這就寫下來，算做對本身的一個總結。

具體配置

1.使用create-react-app 建立一個單頁應用，而且建立成功以後運行 npm run eject 暴露配置

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

• 修改entry

//這裏我已經寫成對象格式了，有多少個頁面就添加多少個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文件

• 修改entry

//這裏的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

• 修改historyApiFallback

//這裏的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的模板，裏面也有例子和講解，你們能夠看一看。