关于webpack:WebPack多入口配置

不须要应用路由，而是通过多入口独立实现

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

获取到每个模块的 index.tsx 并拼装成 entry 须要的格局

应用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]

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

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

关于webpack:WebPack多入口配置

Webpack 多入口配置

1. React 目录

2. Webpack 配置