基于create-react-app进行多入口项目配置

最新推荐文章于 2022-11-03 10:08:03 发布

jaggerguo0

最新推荐文章于 2022-11-03 10:08:03 发布

阅读量1.6k

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/jagger_guo/article/details/104860744

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 安装 create-react-app就不说了，可以自行按照官网指导操作；

https://react.docschina.org/docs/create-a-new-react-app.html

npm create-react-app my-app
cd my-app
npm start

2. 安装完成后，执行

npm run eject

3. 完成后配置\config\webpack.config.js文件，修改入口和出口；

// 入口参数配置，出口为 【入口的key】.html
const entryParams = {
  pageOne: [
    paths.appSrc + "/pageOne/index.js",
  ],
  pageTwo: [
    paths.appSrc + "/pageTwo/index.js",
  ]
};
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
  let enterObjKeys = Object.keys(entryParams) || [];
  // 入口参数组装  出口参数组装
  let outParams = [];
  enterObjKeys.forEach(item => {
    entryParams[item].unshift(require.resolve('react-dev-utils/webpackHotDevClient'));
    outParams.push(isEnvProduction && new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      chunks: [item],
      filename: item + '.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      }
    }));
  });

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

具体配置代码，请访问

create-react-app-multiple-entry-config