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`   } }),]