乐趣区

关于webpack: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 文件,能够不应用MiniCssExtractPluginMiniCssExtractPlugin.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`
       }
     }),
    ]
退出移动版