WebPack多入口配置

Webpack多入口配置

不需要使用路由，而是通过多入口独立完成

1. React目录

index.html：模板HTML；如果每个入口的模板HTML不一致，可以建立一个文件夹存放。App.less：公共样式，如果没有，可省略global.d.ts：存放一些全局的公共定义pages：下为多个文件夹，每个文件夹就是一个模块，内包含index.ts及对应的css文件

2. Webpack配置

1. 获取到每个模块的index.tsx并拼装成entry需要的格式

2. 使用html-webpack-plugin，进行HTML模板的创建，因为有多少个entry，就需要进行多少次new HtmlWebpackPlugin()，所以在生成entry处同步进行htmlPlugins的处理，在配置中进行使用

   const getEntries = () => {
     // 每个模块的入口文件都是index.tsx
     const files = glob.sync('./app/pages/**/index.tsx');
     files.forEach(element => {
    const file = element.split('/')
    const name = file[file.length - 2]
    entries[name] = element
    htmlPlugins.push(new HtmlWebpackPlugin({
      title: 'Custom template',
      template: './app/index.html',
      filename: `${name}/index.html`,
      chunks: [name]
    }))
     })
   }

   entry: entries,
   plugins: [
    ...htmlPlugins
   ]

3. js文件按照模块进行js文件的分类，并设置生成路径

   output: {
    filename: '[name]/[name].js',
    path: path.resolve(__dirname, 'out', 'app',),
    chunkFilename: '[name].bundle.js',
   },

   默认会生成license.txt文件，注释则添加以下代码

   optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false
      })
    ],
   }

4. css文件 对less和css文件的解析，注意顺序 如果不需要单独生成css文件，可以不使用MiniCssExtractPlugin， MiniCssExtractPlugin.loader替换为style-loader 对less文件的处理，只使用less-loader会报错，所以添加了options的配置

   module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        }],
      },
    ],
    },

   plugins: [
    new MiniCssExtractPlugin({
      filename: ({ chunk }) => {
        console.log(chunk, 'chunk')
        return `${chunk.name === 'common' ? 'common' : chunk.name}/${chunk.name.replace('/js/', '/css/')}.css`
      }
    }),
   ]