zoukankan      html  css  js  c++  java
  • create-react-app 支持多入口

    转自 http://blog.csdn.net/q617610589/article/details/75026175

    1. Eject the project

    npm run eject

    2. Add multiple entry to webpack.config.dev.js

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

    3. Modify HtmlWebpackPlugin 
    add a new plugin node:

        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["index"],
          template: paths.appHtml,
        }),
        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["admin"],
          template: paths.appHtml,
          filename: 'admin.html',
        }),

    4. webpack Dev Server 
    rewrite urls

    /config/webpackDevServer.config.js:
    
        historyApiFallback: {
          disableDotRule: true,
          // 指明哪些路径映射到哪个html
          rewrites: [
            { from: /^/admin.html/, to: '/build/admin.html' },
          ]
        }
  • 相关阅读:
    C++开发系列-友元函数 友元类
    C++开发系列-C语言的malloc与C++的new分配空间
    C++开发系列-内联函数
    iOS开发系列-Foundation与CoreFoundation内存管理
    C开发系列-字符串
    C开发系列-数组
    列表 元组 字典
    神奇的print
    while 语句的逻辑
    <Web Crawler><Java><thread-safe queue>
  • 原文地址:https://www.cnblogs.com/wssdzf/p/8296017.html
Copyright © 2011-2022 走看看