create-react-app+wepack4 实现多页面应用

create-react-app v2.1.8
react 16.8
wepack 4.xx

1 create-react-app 创建项目，

2 npm run eject 暴露出webpack ,并保证项目可以正常运行

3 添加文件

在public文件夹下添加login.html

在src/目录下添加index.js, login.js

4 原理

将index.html的入口文件为src/index.js

将login.html的入口文件为src/index.js

实现后可

进入localhost:3000/login.html

进入localhost:3000/index.html

5 修改config/paths.js

module.exports = {
   appHtml: resolveApp('public/index.html'),
+  appLogin: resolveApp('public/login.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appLoginJs: resolveModule(resolveApp, 'src/login'),
 }

6 调整webpack.config.js几个地方：

-entry: [
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appIndexJs,
-    ].filter(Boolean),
+    entry:{
+      index:[
+        isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+        paths.appIndexJs,
+      ].filter(Boolean),
+      login:[
+        isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+        paths.appLoginJs,
+      ].filter(Boolean),
+    },

    output: {
        //...
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
+        : isEnvDevelopment && 'static/js/[name].bundle.js',
    }

    plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
+            chunks:['index']
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appLogin,
+            chunks:['login'],
+            filename:'login.html'
+
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      ),