webpack 打包多页面应用

简介: webpack 打包多页面应用

和传统的单页面应用打包不同,多页面应用其实就是配置多个入口,生成多个bundle。
下面就来看看具体应该怎么操作吧
image.png
这是官方提供的示例,可以看到,entry变成了一个对象,而里面每一个键值对则就对应了我们每一个最终生成的bundle。文档地址:https://www.webpackjs.com/concepts/entry-points/#separate-app-and-vendor-entries
其实还是非常简单的,原理上来说就是配置多个入口文件,使webpack生成多个依赖关系,从而构建出多个bundlejs。这样我们在不同的html文件引入对应的bundle就行了。

但是有一个问题,这样的配置我们每增加一个子页面都需要去写一个entry的键值对,非常的麻烦。那有没有什么办法可以一次性获取到这些子页面然后自动生成entry呢?

答案是有的,借助glob这个库就可以完成。

glob这个库有个sync的方法,可以获取指定路径下的所有文件,有了这个我们不就可以一次性拿到所有的子页面了嘛。下面一起来看看具体操作吧

首先下载以下这个库

npm i glob -D
const setMPA = ()=>{
   
    const entry = {
   }
    const htmlWebpackPlugin = []
    const entryFile = glob.sync('./pages/*/main.js')
    entryFile.forEach((filePath,index)=>{
   
        //根据获取到的路劲生成多入口entry对象
        const entryName = filePath.split('/pages/')[1].split('/main.js')[0]
        entry[entryName] = filePath
        //接着生成每个入口的html模板
        htmlWebpackPlugin.push(
            new HtmlWebpackPlugin({
   
                filename: `${
     entryName}.html`,
                template: path.resolve(__dirname,`./pages/${
   entryName}/public/index.html`),
                chunks: [entryName], //只打入指定的chunks,不然的话webpack会将所有bundle都引入
                inject: true,//配置所有js资源放置在html得哪个位置
                minify:{
   
                    //压缩配置
                    collapseWhitespace: true,
                    preserveLineBreaks:false,
                    html5:true,
                    minifyCSS:true,
                    minifyJS:true,
                    removeComments: true,
                }
            })
        )
    })
    return{
   
        entry,
        htmlWebpackPlugin
    }
}

有了这个函数,就能拿到最新的entry以及最新的htmlWebpackPlugin配置。

目录结构如下
image.png
下面来看看效果
image.png
image.png

相关文章
|
24天前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
24天前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
18天前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
70 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
17天前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
18天前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
|
2月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
21 1
|
2月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
129 60
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
79 13