webpack4 多页面打包

我会带着你远行 2021-07-24 11:00 498阅读 0赞

方式一:
    	将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin
    	通过html-webpack-plugin中的chunks属性,引入entry中对应的chunk
    
    方式二:
    	在方法中通过glob或fs来匹配指定文件夹下的文件,遍历生成webpack对应的entry和html-webpack-plugin配置
    
    	方式一:
    		通过glob匹配目录后通过正则得到文件夹名称
    	
    	方式二:
    		通过fs模块来获取文件信息
    		const files = fs.readdirSync('./src')   获取路径下的所有文件名
    		  files.forEach(function (item, index) {
    		    let stat = fs.lstatSync("./src/" + item)  获取路径中的文件信息
    		    if (stat.isDirectory() === true) { 
    		      是文件夹的情况
    		  }
    		})
    		
    		通过path.dirname解析绝对路径获取到的文件夹名称会包含绝对路径的信息,所以使用fs

代码示例:

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const glob = require('glob');
    const fs = require('fs');
    
    //多页面配置entry和htmlWebpackPlugin
    const setOptions = ()=>{ 
      const entry = { };
      const htmlWebpackPlugin = [];
    
      const entryFiles = glob.sync(path.resolve(__dirname, './src/*/index.js'))
      const fileReg = /src\/(.*)\/index\.js/;
    
      entryFiles.forEach((filePath, index) => { 
        const fileName = filePath.match(fileReg);
        
        entry[fileName[1]] = filePath;
        htmlWebpackPlugin.push(
          new HtmlWebpackPlugin({ 
            template: `./src/${ fileName[1]}/index.html`,
            filename:fileName[1]+'.html',
            chunks:[fileName[1]]
          })
        )
      })
    
    
      return { 
        entry,
        htmlWebpackPlugin
      }
    }
    
    module.exports = { 
      // entry: './src/index.js',
      entry: setOptions().entry,
      output: { 
        path: path.resolve(__dirname, 'dist'),
        filename:'[name]_[chunkhash:8].js'
      },
      module: { 
        rules: [
          { 
            test: /\.js$/,
            use:['babel-loader']
          },
          { 
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { 
                loader: "postcss-loader",
                options: { 
                  postcssOptions: { 
                    plugins: [
                      [
                        "autoprefixer",
                        { 
                          overrideBrowserslist: [
                              "Android 4.1",
                              "iOS 7.1",
                              "Chrome > 31",
                              "ff > 31",
                              "ie >= 8",
                              "> 1%", // 必须大于 1% 用户使用的浏览器
                              //'last 2 versions', // 所有主流浏览器最近的 2个版本
                          ],
                        },
                      ],
                    ],
                  },
                },
              },
              { 
                loader: 'px2rem-loader',
                options: { 
                  remUnit: 75, //初始稿的10分之一,代表设计稿为750,1rem=75px,
                  remPrecision:8,  //精确的小数点位数
                }
              }
            ]
          },
          { 
            test: /\.txt$/i,
            use: [
              { 
                loader: 'raw-loader',
                options: { 
                  esModule: false,
                },
              },
            ],
          }
        ]
      },
      mode: "development",
      plugins: [
        ...setOptions().htmlWebpackPlugin,
        new MiniCssExtractPlugin({ filename:'css/build.css'}),
        new HTMLInlineCSSWebpackPlugin(),
        new CleanWebpackPlugin()
      ]
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，498人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 实现自动化多页面打包

一、为什么要使用自动化多页面打包二、实现三、结果 -------------------- 一、为什么要使用自动化多页面打包当我们有多个入口时，若是手动一个

布满荆棘的人生/ 2023年06月25日 14:25/ 0 赞/ 26 阅读

相关 webpack4打包多个js文件

默认文件目录： ![70][] 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = requi

谁借莪１个温暖的怀抱￠/ 2022年05月19日 03:09/ 0 赞/ 253 阅读

相关 Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也可能遇

Bertha 。/ 2022年03月30日 14:18/ 0 赞/ 563 阅读

相关 vue2项目从webpack3升级到webpack4过程全记录以及多页面打包

升级各种插件，尤其是babel系列，从6升级到了7 1. babel7系列的安装大多是@babel/开头，至少需要安装以下插件 "@babel/core":

一时失言乱红尘/ 2021年11月16日 23:50/ 0 赞/ 590 阅读

相关 webpack多页面打包配置

单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进

柔光的暖阳◎/ 2021年10月25日 12:34/ 0 赞/ 482 阅读

相关 webpack4 打包模板配置

命令打包: 方式一: webpack 起始文件 -o 输出文件 --mode=开发模式 -o为--output-

超、凢脫俗/ 2021年07月25日 01:42/ 0 赞/ 515 阅读

相关 webpack4 打包图片

1、下载 cnpm install url-loader file-loader html-loader@0.5.5 -D 其中url-loader

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:24/ 0 赞/ 485 阅读

相关 webpack4 打包样式文件

1、添加loader (1)下载对应loader包 (2)下载后,使用时要注意顺序 style-loader, 创建style标签,将j

￡神魔★判官ぃ/ 2021年07月24日 17:58/ 0 赞/ 425 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 527 阅读

相关 webpack4 多页面打包

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plug

我会带着你远行/ 2021年07月24日 11:00/ 0 赞/ 499 阅读